react-search
is an extensible autocompleting search component component using react.js.
npm install react-search --save
import Search from 'react-search'
import ReactDOM from 'react-dom';
import React, { Component } from 'react';
let ITEMS = ['ruby', 'javascript', 'lua', 'go', 'julia', 'c', 'scala','haskell']
ReactDOM.render(<Search items={ITEMS}/>, document.getElementById('root'));
List of Items to filter through
default: react-search
Optional class prefix for included class names. Will also be attached to the main wrapper element. Included class suffixes are:
__input
__menu
__menu-item
__menu--hidden
Placeholder attribute for the text input
Update handler for the text input. Fired before the internal logic to update the autocomplete list
Click handler for each item in the autocomplete list. Fired before the internal logic to hide the autocomplete list
default: 'li'
Custom element to use for each <li>
in the autocomplete list. Can be a React Element or a valid DOM tag as a string, such as <CustomElement>
or 'div'
default: 'ul'
Custom element to use as wrapper for autocomplete list. Can be a React Element or a valid DOM tag as a string, such as <CustomElement>
or 'div'
All of the following allow you to extend (via spread operator) the properties of the individual elements that make up the Search
component.
Property extensions for the text input
Property extensions for the wrapper around text input
Property extensions for the each individual autocomplete list elements. Note: list elements will also be extended with an items properties
Property extensions for the autocomplete <ul>
Property extensions for the autocomplete wrapper
Property extensions for the wrapper that is the root of the <Search>
component
You can specify callback functions for onClick of the element and onChange of the search input. The element passed in is the SyntheticKeyboardEvent, which you can use to get the target or value. Check out the example
react-search can be used with your own custom styles. A minimal search.css style sheet is included in the example as a guide. The styles follow BEM naming conventions.
npm install
npm run build
npm test
npm start