react-multiple-select-dropdown-lite

React Multiple Select Dropdown Lite

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

Production minified 4.6 kb , gzipped 1.6 kb Bundlephobia

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
  
• Searchable
  
• Disabled
  
• Required
  
• Group
  
• Sublist
  
• Select Limit
  
• Custom Creatable Value
  

Props Options

Props	type	default	description
options	array	""	pass options as array of object label : (string) Options Label value : Option value style : (object) custom style classes : (string) style classes example: [ { label : "Option 1", value : "opt_1", style: {textAlign: 'center'}, classes: "classA classB" } ]
onChange	function		Return value on input change
width	int	300	Specify width in px
name	string	''	specify a name
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	Icon	Specify custom down 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

Sponsor

License

MIT © Arif-Un | Build for Bit Form