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-lite
Basic 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 App
Features and Roadmap
- [x] JSON Value
- [x] Clearable
- [x] Disable Chip
- [x] Custom Down Arrow Icon
- [x] Disabled
- [x] Select Limit
- [x] Group
- [x] Searchable
- [x] Custom Creatable Value
- [x] 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 |
CSS Variables
CSS variable applied in .msl-vars
class name.
Variable | Default Value | Details |
---|---|---|
--menu-max-height | 400px | Dropdown menu maximum height. |
--input-width | 300px | Dropdown input width. |
--font-size | 16px | Dropdown font size. |
--border-radius | 8px 8px 8px 8px | Dropdown Border Radius. |
--active-menu-shadow | 1px 1px 5px 0px gray | Menu Shadow when active. |
--line-height | 1.4 | fonts line height. |
--active-menu-background | white | Dropdown menu background color when active. |
--active-menu-radius | var(--border-radius) | Dropdown menu border radius when active. |
Change Log
v-2.0.4
- CSS variables updated
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