React-select-several NPM

React-select-several

⚡️ 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`