# react-multiple-select-dropdown-lite

> React Multiple Select Light Weight Dropdown list | Searchable | Addable | Groupable etc

Latest version **2.0.6** (published 2022-08-22) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-multiple-select-dropdown-lite
pnpm add react-multiple-select-dropdown-lite
yarn add react-multiple-select-dropdown-lite
bun add react-multiple-select-dropdown-lite
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.0.6 |
| Published | 2022-08-22 |
| First published | 2020-06-08 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Node | >=12 |
| Dependencies | 0 |
| Unpacked size | 165.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 11 |
| Author | arif-un |
| Maintainers | muhammad_arif |
| Keywords | npm, react, dropdown, multilist, list, autocomplete, multiselect-react-dropdown, react-multiselect-dropdown, multiselect react dropdown, react multiselect dropdown, combobox, form, input, multiselect, react-component, select, ui |

## Links

- npm: https://www.npmjs.com/package/react-multiple-select-dropdown-lite
- Repository: https://github.com/Arif-un/react-multiple-select-dropdown-lite
- Homepage: https://github.com/Arif-un/react-multiple-select-dropdown-lite#readme
- Issues: https://github.com/Arif-un/react-multiple-select-dropdown-lite/issues
- npm.io page: https://npm.io/package/react-multiple-select-dropdown-lite

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 2.0.6 (latest) — 2022-08-22
- 2.0.5 — 2022-01-30
- 2.0.4 — 2020-12-30
- 2.0.3 — 2020-12-28
- 2.0.2 — 2020-12-17
- 2.0.1 — 2020-12-17
- 2.0.0 — 2020-12-08
- 1.1.0 — 2020-11-03
- 1.0.19 — 2020-10-24
- 1.0.18 — 2020-09-20
- 1.0.17 — 2020-09-19
- 1.0.16 — 2020-09-19
- 1.0.15 — 2020-08-12
- 1.0.12 — 2020-08-06
- 1.0.11 — 2020-08-06
- … 11 more at https://npm.io/package/react-multiple-select-dropdown-lite/versions

## README

## React Multiple Select Dropdown Lite
A lightweight Multiple/Single Select Pure functional component for react using React-Hooks.

<p align="center">
  <a href="https://github.com/Arif-un/react-multiple-select-dropdown-lite/blob/master/LICENSE">
    <img src="https://img.shields.io/badge/license-MIT-blue.svg" alt="React Multiple Select Dropdown Lite is released under the MIT license." />
  </a>
  <a href="https://www.npmjs.com/package/react-multiple-select-dropdown-lite">
    <img alt="npm" src="https://img.shields.io/npm/v/react-multiple-select-dropdown-lite">
  </a>
  <a href="https://bundlephobia.com/result?p=react-multiple-select-dropdown-lite@2.0.4">
    <img alt="npm bundle size" src="https://img.shields.io/bundlephobia/min/react-multiple-select-dropdown-lite">
  </a>
  <a href="https://bundlephobia.com/result?p=react-multiple-select-dropdown-lite@2.0.4">
    <img alt="npm bundle size" src="https://img.shields.io/bundlephobia/minzip/react-multiple-select-dropdown-lite">
  </a>
  <a href="https://github.com/Arif-un/react-multiple-select-dropdown-lite/pulls">
    <img alt="npm bundle size" src="https://img.shields.io/badge/PRs-welcome-brightgreen.svg">
  </a>
</p>

### Screenshot
![react-multiple-select-dropdown-menu](https://github.com/Arif-un/react-multiple-select-dropdown-lite/blob/master/screenshoot/react%20multiple%20select%20dropdown%20menu%20,%20lightweight,%20react%20hooks.gif?raw=true)

### 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 <br>
- [x] Clearable <br>
- [x] Disable Chip <br>
- [x] Custom Down Arrow Icon <br>
- [x] Disabled <br>
- [x] Select Limit <br>
- [x] Group <br>
- [x] Searchable <br>
- [x] Custom Creatable Value <br>
- [x] Themeable (using css var) <br>
<!-- - [ ] Sublist <br> -->

## Props Options
|Props| type | default | description
|-----|------| ------- | ----------|
| options| array | ""  | pass options as array of object <br> `label` : (string or JSX) Options Label <br> `value` : Option value <br> `style` : (object) custom style <br> `classes` : (string) style classes <br>`title` : must be provide for JSX label <br> <br> example: <br> `[ { 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

<br>

### 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 <br> 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 <br>  when active.
|--line-height| 1.4| fonts line height.
|--active-menu-background| white| Dropdown menu <br>  background color when active.
|--active-menu-radius| var(--border-radius)| Dropdown menu border <br>  radius when active.

<br>

### 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

<br>
<br>
<br>

### Sponsor

[<img src="https://www.bitcode.pro/wp-content/uploads/2019/09/final.svg_-3.png">](https://www.bitcode.pro/)


### License
MIT © [Arif-Un](https://github.com/arif-un) | [Amin](https://github.com/mdrubelamin2) | Built for Bit Form

---
_Source: https://npm.io/package/react-multiple-select-dropdown-lite · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._