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

Multiple select dropdown component in react.

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

react-multiple-select-dropdown-lite's Issues

Not able to set default value

I tried adding everything as mentioned string, array or object but I am not able to show selected values of multi select dropdown, please help me to use correct method to set defaultValue in this dropdown, thank you.

clear the selection after setState

Hi, just a simple question:
I've developed a component that allow my app to POST data retrieved by this dropdown selection.
One simple "save button" allow me to call my api and store the data then the setState is invoked to re-render the page (to show the new things) but inside the dropdown selection still remains the previous one value.
There is a way to "remove" this value from the dropdown view after the save?

I want to be able to see the dropdown "cleared" after setState, without do an hard page refresh. It's possible?

Thank you!

Search

Hi. Thanks for the open source ). This is exactly what is needed to speed up the site.

I wanted to clarify. Why is the search done on the "value" field and not on the "label" field?

And the second. Parameter "closeOnSelect" really doesn't work.

closeOnSelect is not working

import "./styles.css";
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 (

Dropdown label

  <div className="preview-values">
    <b>Values: </b>
    {value}
  </div>
</div>

);
};
export default App;

Expose a callback after clear all

It will be great if you could expose a new callback after clear all.

`closeOnSelect` is only respected when `singleSelect`

could closeOnSelect also be resepected with multiselect ?

I'd like to keep the ability to have multiple option selected, while simultaneously closing the popup after each select, because I believe most users will only want one value. Since the dropdown is hiding contents below, closing instantly avoid users to have to move the mouse away, and click once.

looking at:

react-multiple-select-dropdown-lite/src/MultiSelect.jsx

Line 164 in eebea0c

if (closeOnSelect && singleSelect) {

I can't think of any strong reason to restrict this option in the case of multiSelect.

Is there a way to change color of placeholder and increase the height of the box

I have implemented multi-select-lite in my project is there a way to change the color of the placeholder and increase the width of primary box?