# @alchemdigital/multiselect

> Multiselect Component for input options selection

Latest version **1.1.1** (published 2022-02-11) · MIT license · 0 weekly downloads

## Install

```sh
npm install @alchemdigital/multiselect
pnpm add @alchemdigital/multiselect
yarn add @alchemdigital/multiselect
bun add @alchemdigital/multiselect
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.1 |
| Published | 2022-02-11 |
| First published | 2022-02-01 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 7 |
| Unpacked size | 7.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | D.Bairavan |
| Maintainers | bairavan |
| Keywords | react, components, multiselect, popup options select, model options select |

## Links

- npm: https://www.npmjs.com/package/@alchemdigital/multiselect
- Repository: https://github.com/alchemdigital/multiselect
- Homepage: https://github.com/alchemdigital/multiselect#readme
- Issues: https://github.com/alchemdigital/multiselect/issues
- npm.io page: https://npm.io/package/@alchemdigital/multiselect

## Dependencies (7)

- [react](https://npm.io/package/react.md) ^17.0.2
- [react-dom](https://npm.io/package/react-dom.md) ^17.0.2
- [web-vitals](https://npm.io/package/web-vitals.md) ^2.1.4
- [react-scripts](https://npm.io/package/react-scripts.md) 5.0.0
- [@testing-library/react](https://npm.io/package/@testing-library/react.md) ^12.1.2
- [@testing-library/jest-dom](https://npm.io/package/@testing-library/jest-dom.md) ^5.16.1
- [@testing-library/user-event](https://npm.io/package/@testing-library/user-event.md) ^13.5.0

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.1.1 (latest) — 2022-02-11
- 1.1.0 — 2022-02-11
- 1.0.7 — 2022-02-03
- 1.0.6 — 2022-02-01
- 1.0.5 — 2022-02-01
- 1.0.4 — 2022-02-01
- 1.0.3 — 2022-02-01
- 1.0.2 — 2022-02-01
- 1.0.1 — 2022-02-01
- 1.0.0 — 2022-02-01

## README

# What is Multiselect

Instead of using dropdown, you can use this component to let the user select single or multiple options without scrolling. Use this component in models for better UI.

## Compatability

It works with react and tested esecially with functional components

## How to use
```
    npm i @alchemdigital/multiselect
```
```js
    import { Multiselect } from '@alchemdigital/multiselect'

    function MyComponent() {

        const handleSelect = (selectedValue, selectedLabel, e) => {
            console.log(selectedValue)
            console.log(selectedLabel)
        }

        const handleHide = () => {
            console.log('Hide or Update button clicked')
        }

        return (
            <Multiselect
                handleSelect={handleSelect}
                handleHide={handleHide}
                values={[1]} // Selected values to highlight
                isMulti={true} // Single or Multiple select
                valueKey="value" // Default value is id
                labelKey="label" // Default value is name
                title="Select Language(s)"
                options={[
                    { value: 1, label: 'Tamil' },
                    { value: 2, label: 'English' }
                ]}
                show={true} // Show or Hide
                buttonText={'Add / Update'}
            />
        )
    }
```

## Demo output
![alt text](public/multi.PNG)

## Support

Alchem Digital (bairavan@alchemdigital.com)

---
_Source: https://npm.io/package/@alchemdigital/multiselect · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._