uduma-sonia / react-select-several

Customizable select and input field for React that enables users to select and input multiple options

React-select-several

Customizable select and input field for React that enables users to select and input multiple options

⚡️ Features

• 100% responsive
• 100% customizable
• Supports any css unit
• No third party dependency
• TypeScript ready
• Multi select option
• Multi input option

Installation

$ npm i react-select-several

Examples

codesandbox

Basic Usage

For select field

//Import react-select-several component
import { SelectMultiple } from 'react-select-several'

export const App = () => {
  const onChange = (values: string[]) => {
    console.log(values)
  }

  return (
    <>
      <SelectMultiple onChange={onChange}>
        <option>HTML</option>
        <option>CSS</option>
        <option>JavaScript</option>
      </SelectMultiple>
    </>
  )
}

For input field

//Import react-select-several component
import { InputMultiple } from 'react-select-several'

export const App = () => {
  const onChange = (values: string[]) => {
    console.log(values)
  }

  return (
    <>
      <InputMultiple onChange={onChange} />
    </>
  )
}

Props

React-select-several has two main components, a select field and input field. It is majorly used to select or input multiple options. Here is a table of the available props that can be passed down.

General props

Props	Description	Type	Default
name	Set the name of the input or select field	string
id	Set the name of the input or select field	string
onChange	Function to get the values	(e: string[]) => void
maxNumber	Sets the maximum number for input or selection	number
tagIcon	Custom Icon for the tag deletion, (react-icons can be used)	React.ReactElement
placeholder	Sets the placeholder for the input or select field	string
required	Props to ensure the field is required	boolean	false
disable	Props for disabling the field	boolean	false
autoFocus	Props that lets you specify if the field should have focus when the page loads	boolean	false
autoComplete	Props providing a hint for a user agent's autocomplete feature	string
tagContainerClass	Custom classname for the parent container of all tags	string
tagBackgroundColor	Custom background color for tags	string
tagTextColor	Custom color for tag text	string

Select props

Props	Description	Type
children	A list of options for the select field
selectTagClass	Custom class for tags	string
selectTagTextClass	Custom class for tags texts	string
selectTagIconClass	Custom class for tags icons	string
selectClass	Custom class for select field	string

Input props

Props	Description	Type
inputTagClass	Custom class for tags	string
inputTagTextClass	Custom class for tags texts	string
inputTagIconClass	Custom class for tags icons	string
inputClass	Custom class for input field	string

Contribution

React-select-several is an open-source project and contributions are welcome. Got ideas on how to make this better? Open an issue!

⚖️ Licence

MIT (c) Sonia Uduma.