JSPM

  • Created
  • Published
  • Downloads 19383
  • Score
    100M100P100Q136386F
  • License MIT

React powered selectbox with filter

Package Exports

  • react-select-search

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 (react-select-search) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

React Select Search

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"
        search={true}
        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.