https://github.com/arif-un/react-multiple-select-dropdown-lite
Multiple select dropdown component in react.
https://github.com/arif-un/react-multiple-select-dropdown-lite
customizable-dropdown customizable-select-component dropdown input multiple-select multiple-select-dropdown react searchable-select select select-group
Last synced: 7 months ago
JSON representation
Multiple select dropdown component in react.
- Host: GitHub
- URL: https://github.com/arif-un/react-multiple-select-dropdown-lite
- Owner: Arif-un
- License: mit
- Created: 2020-06-06T03:05:09.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2023-10-18T02:01:41.000Z (over 2 years ago)
- Last Synced: 2025-06-23T04:51:28.037Z (8 months ago)
- Topics: customizable-dropdown, customizable-select-component, dropdown, input, multiple-select, multiple-select-dropdown, react, searchable-select, select, select-group
- Language: JavaScript
- Homepage:
- Size: 2.07 MB
- Stars: 11
- Watchers: 4
- Forks: 7
- Open Issues: 15
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
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-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(
Values
{value}
)}
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
### Sponsor
[
](https://www.bitcode.pro/)
### License
MIT © [Arif-Un](https://github.com/arif-un) | [Amin](https://github.com/mdrubelamin2) | Built for Bit Form