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 |

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.