React Awesome Multiselect

react-awesome-multiselect is multiple select dropdown library which is based on react 18 and It is free to use.

[Latest Update] :- isTypeToSearch props add to search item from dropdown list.

Get Started

 //npm
 `npm install react-awesome-multiselect`
 //or yarn
 `yarn add react-awesome-multiselect`

Code Example

import MultiSelect from 'react-awesome-multiselect';
import {useState} from 'react';

export default const App = () => {
    const arr = [
    {
      id: "1",
      displayValue: "ReactJs",
      avatar:
        "https://blog.logrocket.com/wp-content/uploads/2020/11/create-avatar-feature-react.png"
    },
    {
      id: "2",
      displayValue: "AngularJs",
      avatar:
        "https://www.kindpng.com/picc/m/296-2965187_angular-avatar-hd-png-download.png"
    },
    {
      id: "3",
      displayValue: "VueJs",
      avatar:
        "https://assets.codepen.io/t-1003/internal/avatars/teams/default.png?fit=crop&format=auto&height=512&version=1513627136&width=512"
    },
    {
      id: "4",
      displayValue: "NodeJs",
      avatar:
        "https://miro.medium.com/max/800/1*bc9pmTiyKR0WNPka2w3e0Q.png"
    }
  ];

    const [selectedOpt,setSelectedOpt] = useState([])

    const handleSelectCb = (opt) => {
        setSelectedOpt(opt);
        console.log(opt);
        // ["1","2"] selected ids
    }

    return (
        <MultiSelect
            list={arr}
            handleSelectCb={handleSelectCb}
            selectedOptions={selectedOpt}
            dropDownColor={"blue"}
            chipColor={"red"}
            listSelectColor={"green"}
            isCloseOnOutsideClick={true}
            isTypeToSearch={true}
        />
    )
}

Demo link :- CodeSandBox Example

Props Attributes

# Functional Attributes

Props	Type	isRequired	Default Value
list**	Array of Objects	true	[]
handleSelectCb	Callback Function	true	() => {}
selectedOptions	Array of String Values	false	[]
isCloseOnOutsideClick	boolean	false	false
isTypeToSearch	boolean	false	false

# CSS Attributes

Props	Type	isRequired	Default Value
dropDownColor	String	false	#6464d9
chipColor	String	false	#6464d9
listSelectColor	String	false	#ffb366

**List Sub Attributes

Field	Type	isRequired
id	String	true
displayValue	String	true
avatar	String	false

License

MIT

Free Software, Hell Yeah!