React Select Search
React powered selectbox with filter using fuse.js (Javascript fuzzy-search).
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 import it like you normally would.
import SelectSearch from 'react-select-search'
const options = [
{name: 'Swedish', value: 'sv'},
{name: 'English', value: 'en'}
];
<SelectSearch options={options} value="sv" name="language" placeholder="Choose your language" />
Below is a full list of properties and defaults (displayed in React style).
{
options : React.PropTypes.array.isRequired,
className : React.PropTypes.string.isRequired,
search : React.PropTypes.bool.isRequired,
placeholder : React.PropTypes.string,
multiple : React.PropTypes.bool.isRequired,
height : React.PropTypes.number,
name : React.PropTypes.string,
fuse : React.PropTypes.object.isRequired,
valueChanged : React.PropTypes.func.isRequired,
optionSelected : React.PropTypes.func.isRequired,
onMount : React.PropTypes.func.isRequired,
onBlur : React.PropTypes.func.isRequired,
onFocus : React.PropTypes.func.isRequired,
renderOption : React.PropTypes.func.isRequired,
mode : React.PropTypes.string.isRequired,
value : React.PropTypes.oneOfType([
React.PropTypes.string,
React.PropTypes.array
])
}
{
options : [],
className : 'select-search-box',
search : true,
value : null,
placeholder : null,
multiple : false,
height : 200,
name : null,
mode : 'select',
valueChanged : function () {},
optionSelected : function () {},
onMount : function () {},
onBlur : function () {},
onFocus : function () {},
onChange : function () {},
renderOption : function (option) {
return option.name;
},
fuse: {
keys : ['name'],
threshold : 0.3
}
}
The height property is the minimum height (max is the remaining space below the selectbox down to the browser window end) of the dropdown if multiple is false, otherwise it's the fixed height.
For examples you can take a look at the bootstrap.js file on the gh-pages branch.
You will also need some CSS to make it look right. The important piece is the options.
.select-search-box__select {
display: none;
}
.select-search-box--multiple .select-search-box__select {
display: block;
}
.select-search-box__select--display {
display: block;
}
.select-search-box__select--prehide {
opacity: 0;
}
.select-search-box__options {
}
.select-search-box__option {
}
.select-search-box__option--selected {
}
.select-search-box__option--hover, .select-search-box__option:hover {
}