react-search
react-search is an extensible autocompleting search component component using react.js.
Install
npm install react-search --save
Usage
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'));
Basic Props
items (required)
List of Items to filter through
classPrefix
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
Placeholder attribute for the text input
onChange
Update handler for the text input. Fired before the internal logic to update the autocomplete list
onClick
Click handler for each item in the autocomplete list. Fired before the internal logic to hide the autocomplete list
ItemElement
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'
AutoCompleteListElem
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'
Advanced Props
All of the following allow you to extend (via spread operator) the properties of the individual elements that make up the Search component.
inputProps
Property extensions for the text input
inputWrapperProps
Property extensions for the wrapper around text input
itemProps
Property extensions for the each individual autocomplete list elements. Note: list elements will also be extended with an items properties
autoCompleteListProps
Property extensions for the autocomplete <ul>
autoCompleteWrapperProps
Property extensions for the autocomplete wrapper
wrapperProps
Property extensions for the wrapper that is the root of the <Search> component
Callbacks onClick and onChange
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
Styles
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.
Development
npm install
npm run build
npm test
npm start