React-awesome-multiselect NPM

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`