blueprint-fuzzy-select

1.0.13 • Public • Published

Blueprint Fuzzy Select

Blueprint Fuzzy Select is React component intended to extend Blueprint's Input with fuzzy search suggestions dropdown à la Atom's command palette. 🖥

It supports any input as its child but suggestions dropdown uses Blueprint's Menu and MenuItem components. 💙

Install

yarn add blueprint-fuzzy-select

Or if you prefer npm:
npm install blueprint-fuzzy-select

Usage

Example

Inside your react component.

<FuzzySelect
    haystack={['Kuba', 'Jen']}
    sort={true}
    onSelect={(name) => alert(name)}
>
    <input />
</FuzzySelect>

Properties


haystack (type: Array)

Array of objects or strings containing the search list.


selected (type: object or string)

A selected option. If provided the component will behave in a controlled manner. 🎉


field (type: string)

A name of the property to use for searching in haystack objects.
Required if haystack is an array of objects, useless otherwise.


caseSensitive (type: bool, default: false)

Indicates whether comparisons should be case sensitive.


sort (type: bool, default: false)

Indicates whether results will sort by best match.


selectOnBlur (type: bool or string, default: false)

Indicates whether the first option should be selected on blur.
You can also pass 'Click' or 'Tab' to limit behavior.


selectOnEnter (type: bool, default: false)

Indicates wether the first option should be selected on enter.


onSelect(needle) (type: function, required)

A function to perform when user selects an option.
needle is a selected option out of haystack.


onAdd(input) *(type: function)

A function to perform when users adds a new option.
Should return a new option based on an input. If not specified adding new options will be disabled.


onInput(input) (type: function)

A function to perform when user inputs a text.


onSuggestions(suggestions) (type: function)

A function to perform when user inputs a text.


onFocus() (type: function)

A function to perform when user focuses an input.


onBlur() (type: function)

A function to perform when user clicks outside the input.


children (type: element) An element to use as input.

Build

npm run build

Test

npm run test

License

MIT

Issues

Use GitHub to report all issues.

Dependents (0)

Package Sidebar

Install

npm i blueprint-fuzzy-select

Weekly Downloads

13

Version

1.0.13

License

MIT

Last publish

Collaborators

  • soni96pl