This component was inspired by react-fuzzy-picker
For the fuzzy search part this component uses Fuse.js
If all you need is a straight out of the box solution for fuzzy search, this is a great choice.
Add react-fuse-picker to your project
yarn add react-fuse-picker
Table of Contents
<FusePicker
isOpen={true}
items={yourItems}
renderItem={item => item.title}
onChange={item => alert(`Chose: ${item.title}`)}
fuseOptions={yourfuseOptions}
/>
<FuseBox
isKeyPressed={() => event.keyCode === 83 && event.ctrlKey}
popup={(isOpen, onClose) => (
<FusePicker
isOpen={isOpen}
onClose={onClose}
renderItem={item => item.title}
onChange={item => alert(`Chose: ${item.title}`)}
items={yourItems}
fuseOptions={yourFuseOptions}
/>
)}
/>
You can also try out the demo
@import "node_modules/react-fuse-picker/umd/main.css";
<FusePicker />
is the component that controls the picker behaviour
The items on which the fuzzy search will be applied.
The maximum number of results displayed by the picker.
If true
when the user goes to the last result and navigates further down, it goes back to the first result.
The object containing all Fuse.js configuration. For more info visit Fuse.js
Callback for when the user selects an option. It receives the item
as param.
Callback for when the user closes the picker.
Function that will render each single result item.
Function that will render the info/instructions of the picker on top of the input.
Create your own and return null
if you don't want any info.
Function that allows you to customize the return value of the picker. By default it returns the whole item (object) but you can customize it if you so desire.
<FuseBox />
is the component that will wrap a <FusePicker />
in order to show it on command press.
Function that will check if the right command was pressed in order to show the picker.
You can define any kind of combination of key events you want.
Function in which you must render out your <FusePicker />
. Check the demo above to see how!