react-multipick
v0.2.1
Published
A multiselect dropdown package for React.
Downloads
10
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).
Install
yarn add react-multipick
npm i react-multipick --save
Usage
An example with three items, two of them selected:
import Multipick from 'react-multipick';
const data = [
{
value: '1',
label: 'Dinosaurus',
},
{
value: '2',
label: 'Butterflies',
},
{
value: '3',
label: 'Giraffes',
}
];
<Multipick
data={data}
values={['1', '3']}
onChange={values => console.log('values', values)}
/>
Language
The default language used is English. You can change this with a couple of props:
<Multipick
data={data}
searchPlaceholder="Search…"
selectedText="$1 of $2 selected"
noneSelectedText="None selected"
selectAllText="Select all"
selectNoneText="Select none"
/>
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:
<Multipick
data={data}
searchAppearsAfterCount={0}
/>
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.