React-multiple-select-dropdown-lite NPM

React Multiple Select Dropdown Lite

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

Screenshot

react-multiple-select-dropdown-menu

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

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.