Package Exports
- react-multiple-select-dropdown-lite
- react-multiple-select-dropdown-lite/dist/index.js
- react-multiple-select-dropdown-lite/dist/index.modern.js
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
- 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
Sponsor
