react-awesome-multiselect/README.md

React Awesome MultiSelect is a NPM Package which gave multiselect functionality with react ui component.

# 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

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

## Code Example

```sh
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](https://codesandbox.io/s/react-awesome-multiselect-95fotz)

## 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!**