react-multiselect-dd

React Multi Select Dropdown

A reactjs multiselect dropdown with search functionality and multiple other options.

Features!

• Support search on tree view structure
• Provides options for update UI according current theme

Demo: https://sanjayv.github.io/react-multiselect-dd/

Installation

npm install react-multiselect-dd

Setup :

Import module in your app.module.ts:

import Multiselect from "react-multiselect-dd";
...
 
<Multiselect
    data={sampleData}
    onChange={getSelected}
    showSelected={2}/>

sampleData format

const sampleData = [
    {
        value: 1,
        text: "First",
        child: [
            {
                value: 2,
                text: "First.1",
                child: [
                    {
                        value: 3,
                        text: "First.1.1"
                    }
                ]
            }
        ]
    },
    {
        value: 4,
        text: "Second",
    },
    ...
];

Other options (optional) :

Name	Type	Description	Required	Default
data	Array	Data array that use in multiselect dropdown	Yes	[]
onChange	Function	Callback function that use for get selected values	Yes
showSelected	Number	Max limit of display selected item in input, after that it will display total selected count.	No	2
customStyle	Object	Detail here	No

Custom Style

You can update Dropdown style according requirments. Following Custome Styles available:

Name	Type	Description	Default
inputHeight	Number	Use for set Dropdown input height	40
inputWidth	Number	Use for set Dropdown input width	360
checkedColor	String	Use for set checked box checked color	'#e6783b'
optionHeight	Number	Use for set dropdown option height	400

You can pass following options in customStyle props.

<Multiselect
    data={sampleData}
    onChange={getSelected}
    showSelected={2}
    customStyle={{
        'optionHeight': 400,
        'checkedColor': '#e6783b',
        'inputHeight': 40,
        'inputWidth': 360
    }}
/>

License

MIT Licensed. Copyright (c) 2019 sanjay verma

Your contributions and suggestions are always welcome :)