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

• 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

License

MIT © Arif-Un | Amin | Built for Bit Form