react-select-search

React Select Search (WIP)

React powered selectbox with filter using fuse.js (Javascript fuzzy-search).

This is a work in progress and it may be a little buggy at this time. But feel free to test it and report any found bugs.
Example design comes from the beautiful work by Rovane Durso.

Demo

Live demo can be found here: http://tbleckert.github.io/react-select-search/

How to use

Install it with npm (npm install react-select-search --save) and require it like you normally would.

React.render(
    <SelectSearch
        name="country"
        value="SE"
        placeholder="Choose country"
        multiple={false}
        height={height in pixels, used if multiple select}
        className="my-selectbox"
        options={objectWithOptions}
        fuse={fuseJsOptions}
        optionSelected={callbackWhenOptionMarked}
        valueChanged={callbackWhenValueChanged}
        renderOption={modifyOptionHtml}
        onMount={componentDidMountCallback}
        onFocus={searchFocusCallback}
        onBlur={searchBlurCallback} />,
    document.getElementById('selectSearch')
);

These are all available options. The React component renders a hidden field with the name property and the current value to use in forms.