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!