https://github.com/uduma-sonia/react-select-several
Customizable select and input field for React that enables users to select and input multiple options
https://github.com/uduma-sonia/react-select-several
input react react-dropdown react-multiselect react-select select
Last synced: 7 months ago
JSON representation
Customizable select and input field for React that enables users to select and input multiple options
- Host: GitHub
- URL: https://github.com/uduma-sonia/react-select-several
- Owner: uduma-sonia
- License: mit
- Created: 2022-10-12T13:49:43.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2022-10-17T14:37:25.000Z (over 3 years ago)
- Last Synced: 2025-06-11T00:44:08.720Z (8 months ago)
- Topics: input, react, react-dropdown, react-multiselect, react-select, select
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/react-select-several
- Size: 178 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# React-select-several
Customizable select and input field for React that enables users to select and input multiple options
-welcome-brightgreen.svg?style=flat-square)
## ⚡️ 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](https://codesandbox.io/s/react-select-several-517mpe?file=/src/App.js)
## Basic Usage
For select field
```jsx
//Import react-select-several component
import { SelectMultiple } from 'react-select-several'
export const App = () => {
const onChange = (values: string[]) => {
console.log(values)
}
return (
<>
HTML
CSS
JavaScript
>
)
}
```
For input field
```jsx
//Import react-select-several component
import { InputMultiple } from 'react-select-several'
export const App = () => {
const onChange = (values: string[]) => {
console.log(values)
}
return (
<>
>
)
}
```
## 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](https://sohnya.netlify.app/).