https://github.com/codeyellowbv/react-multipick
A multiselect dropdown package for React.
https://github.com/codeyellowbv/react-multipick
Last synced: 9 months ago
JSON representation
A multiselect dropdown package for React.
- Host: GitHub
- URL: https://github.com/codeyellowbv/react-multipick
- Owner: CodeYellowBV
- Created: 2017-04-27T14:12:19.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2017-06-29T09:32:02.000Z (almost 9 years ago)
- Last Synced: 2025-08-21T05:42:07.033Z (10 months ago)
- Language: JavaScript
- Size: 354 KB
- Stars: 5
- Watchers: 6
- Forks: 1
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# React Multipick
A package for React that offers you a multiselect dropdown.
It has buttons to select all or none of the items, and has search functionality.
If there are more than 5 items, it will automatically show the search bar (this is configurable).
[**Demo time**](https://codeyellowbv.github.io/react-multipick/)
## Install
```
yarn add react-multipick
npm i react-multipick --save
```
## Usage
An example with three items, two of them selected:
```js
import Multipick from 'react-multipick';
const data = [
{
value: '1',
label: 'Dinosaurus',
},
{
value: '2',
label: 'Butterflies',
},
{
value: '3',
label: 'Giraffes',
}
];
console.log('values', values)}
/>
```
### Language
The default language used is English. You can change this with a couple of props:
```js
```
### Search bar
By default, the search bar will only show when you have 5 or more items.
If you want it to always appear, you can change it to:
```js
```
You can change it to any other number you want to.
## Contributing
Contributions are very welcome! After forking this repository, you can run this from your terminal:
```
yarn && yarn storybook
```
Open http://localhost:9001 and you should see the Storybook examples. You can use this to test your code in.