JSPM

Features

• Lightweight, with zero dependencies*
• Full test coverage
• Accessible
• Basic HTML select functionality, including multiple
• Search/filter options
• Apply renderers to change markup and behavior
• Keyboard support
• Group options with group names, you can search group names
• Fully stylable

*One optional dependency required for built-in fuzzy search

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 import it like you normally would.

import SelectSearch from 'react-select-search';

/**
 * The options array should contain objects.
 * Required keys are "name" and "value" but you can have and use any number of key/value pairs.
 */
const options = [
    {name: 'Swedish', value: 'sv'},
    {name: 'English', value: 'en'},
    {
        type: 'group',
        name: 'Group name',
        items: [
            {name: 'Spanish', value: 'es'},
        ]
    },
];

/* Simple example */
<SelectSearch options={options} defaultValue="sv" name="language" placeholder="Choose your language" />

For examples you can take a look at the example file.

You will also need some CSS to make it look right. Example theme can be found in style.css

Configuration

Below is all the available options you can pass to the component. Options without defaults are required.