react-fuse-picker

react-fuse-picker is a ready to use Fuzzy Search (using fuse.js) Picker.

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.

Installation

Add react-fuse-picker to your project

yarn add react-fuse-picker

Table of Contents

• Usage
• Demo
• Importing Styles
• API
  • <FusePicker />
    • FusePicker props
      • items: array
      • maxDisplay: integer
      • cycleToTop: boolean
      • fuseOptions: object
      • onChange: function
      • onClose: function
      • renderItem: function
      • renderInfo: function
      • itemValue: function
  • <FuseBox />
    • FuseBox props
      • isKeyPressed: function
      • popup: function

Usage

Embedded Picker (fixed input)

<FusePicker
    isOpen={true}
    items={yourItems}
    renderItem={item => item.title}
    onChange={item => alert(`Chose: ${item.title}`)}
    fuseOptions={yourfuseOptions}
/>

Callable Picker (using ctrl+s command)

<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}
        />
    )}
/>

Demo

You can also try out the demo

Importing styles

@import "node_modules/react-fuse-picker/umd/main.css";

API

<FusePicker />

<FusePicker /> is the component that controls the picker behaviour

FusePicker props

items: array

The items on which the fuzzy search will be applied.

maxDisplay: integer

The maximum number of results displayed by the picker.

cycleToTop: boolean

If true when the user goes to the last result and navigates further down, it goes back to the first result.

fuseOptions: object

The object containing all Fuse.js configuration. For more info visit Fuse.js

onChange: function

Callback for when the user selects an option. It receives the item as param.

onClose: function

Callback for when the user closes the picker.

renderItem: function

Function that will render each single result item.

renderInfo: function

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.

itemValue: function

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 />

<FuseBox /> is the component that will wrap a <FusePicker /> in order to show it on command press.

FuseBox props

isKeyPress: function

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.

popup: function

Function in which you must render out your <FusePicker />. Check the demo above to see how!