Have ideas to improve npm?Join in the discussion! »

    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.

    Install

    npm i blueprint-fuzzy-select

    DownloadsWeekly Downloads

    2

    Version

    1.0.13

    License

    MIT

    Last publish

    Collaborators

    • avatar