Package Exports
- react-multiple-select-dropdown-lite
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-multiple-select-dropdown-lite) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
React Multiple Select Dropdown Lite
A lightweight Multiple/Single Select Pure functional component for react using React-Hooks.
Screenshot
Install
npm i react-multiple-select-dropdown-liteBasic Initialization
import React, { useState } from 'react'
import MultiSelect from 'react-multiple-select-dropdown-lite'
import 'react-multiple-select-dropdown-lite/dist/index.css'
const App = () => {
const [value, setvalue] = useState('')
const handleOnchange = val => {
setvalue(val)
}
const options = [
{ label: 'Option 1', value: 'option_1' },
{ label: 'Option 2', value: 'option_2' },
{ label: 'Option 3', value: 'option_3' },
{ label: 'Option 4', value: 'option_4' },
]
return(
<div className="app">
<div className="preview-values">
<h4>Values</h4>
{value}
</div>
<MultiSelect
onChange={handleOnchange}
options={options}
/>
</div>
)}
export default AppFeatures and Roadmap
- JSON Value
- Clearable
- Disable Chip
- Custom Down Arrow Icon
- Disabled
- Select Limit
- Group
- Searchable
- Custom Creatable Value
- Sublist
- Themeable (using css var)
Props Options
| Props | type | default | description |
|---|---|---|---|
| options | array | "" | pass options as array of object label : (string or JSX) Options Label value : Option value style : (object) custom style classes : (string) style classes title : must be provide for JSX label example: [ { label : "Option 1", value : "opt_1", style: {textAlign: 'center'}, classes: "classA classB" } ] |
| width | move in css var (version 2.0.1) | ||
| name | string | '' | specify a name for form |
| disabled | bool | false | disable input |
| defaultValue | string | array of object | string array | '' | specify default value |
| jsonValue | bool | false | get value from input as json |
| singleSelect | bool | false | allow one select only |
| downArrowIcon | string | icon | component | SVG | Specify custom down arrow icon |
| closeIcon | string | icon | component | SVG | Specify custom close arrow icon |
| clearable | bool | true | show / hide close icon to clear value |
| downArrow | bool | true | show / hide down icon in dropdown |
| className | string | object | specify custom class | |
| placeholder | string | Select... | Input Placeholder |
| disableChip | bool | false | disable multiple select chips show value or total selected value only |
| attr | object | set custom attr to element | |
| customValue | bool | false | create custom options by pressing enter or comma (,) |
| largeData | bool | false | prevent slow down (DOM) for large amount of data |
| chipAlternateText | string | (number) Item Selected | Show text when chip disabled. |
| closeOnSelect | bool | true | close option-menu on select option |
Events
| Props | Params | Description |
|---|---|---|
| onChange | values | Trigger on change any value |
| onMenuOpen | null | Trigger when menu open |
| onMenuClose | null | Trigger when menu close |
Change Log
v-2.0.1
- Provide component width in css vars intead of props
- Menu rise up at page bottom
- events added on menu open/close
v-2.0.0
- React component support as label
- Search feature improved
- Custom values grouped
- Single Select Bug fixed
Sponsor
