Package Exports

blueprint-fuzzy-select

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (blueprint-fuzzy-select) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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.