Arif-un/react-multiple-select-dropdown-lite

Repository files navigation

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

React Multiple Select Dropdown Lite is released under the MIT license. npm npm bundle size npm bundle size npm bundle size

react-multiple-select-dropdown-menu

npm i react-multiple-select-dropdown-lite
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
  • JSON Value
  • Clearable
  • Disable Chip
  • Custom Down Arrow Icon
  • Disabled
  • Select Limit
  • Group
  • Searchable
  • Custom Creatable Value
  • Themeable (using css var)
Propstypedefaultdescription
optionsarray""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" } ]
widthmove in css var (version 2.0.1)
namestring''specify a name for form
disabledboolfalsedisable input
defaultValuestring | array of object | string array''specify default value
jsonValueboolfalseget value from input as json
singleSelectboolfalseallow one select only
downArrowIconstring | icon | componentSVGSpecify custom down arrow icon
closeIconstring | icon | componentSVGSpecify custom close arrow icon
clearablebooltrueshow / hide close icon to clear value
downArrowbooltrueshow / hide down icon in dropdown
classNamestring | objectspecify custom class
placeholderstringSelect...Input Placeholder
disableChipboolfalsedisable multiple select chips show value or total selected value only
attrobjectset custom attr to element
customValueboolfalsecreate custom options by pressing enter or comma (,)
largeDataboolfalseprevent slow down (DOM) for large amount of data
chipAlternateTextstring(number) Item SelectedShow text when chip disabled.
closeOnSelectbooltrueclose option-menu on select option

PropsParamsDescription
onChangevaluesTrigger on change any value
onMenuOpennullTrigger when menu open
onMenuClosenullTrigger when menu close

CSS variable applied in .msl-vars class name.

VariableDefault ValueDetails
--menu-max-height400pxDropdown menu
maximum height.
--input-width300pxDropdown input width.
--font-size16pxDropdown font size.
--border-radius8px 8px 8px 8pxDropdown Border Radius.
--active-menu-shadow1px 1px 5px 0px grayMenu Shadow
when active.
--line-height1.4fonts line height.
--active-menu-backgroundwhiteDropdown menu
background color when active.
--active-menu-radiusvar(--border-radius)Dropdown menu border
radius when active.

  • CSS variables updated
  • Provide component width in css vars intead of props
  • Menu rise up at page bottom
  • events added on menu open/close
  • React component support as label
  • Search feature improved
  • Custom values grouped
  • Single Select Bug fixed



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