React Autocomplete 

Accessible, extensible, Autocomplete for React.js.

``jsx
getItemValue={(item) => item.label}
items={[
{ label: 'apple' },
{ label: 'banana' },
{ label: 'pear' }
]}
renderItem={(item, isHighlighted) =>


`bash
npm install --save react-autocomplete
`

$3

`bash
yarn add react-autocomplete
`

$3

* Development: https://unpkg.com/react-autocomplete@1.8.0/dist/react-autocomplete.js
* Production: https://unpkg.com/react-autocomplete@1.8.0/dist/react-autocomplete.min.js

API

$3

#### getItemValue: Function
Arguments: item: Any

Used to read the display value from each entry in items.

#### items: Array
The items to display in the dropdown menu

#### renderItem: Function
Arguments: item: Any, isHighlighted: Boolean, styles: Object

Invoked for each entry in items that also passes shouldItemRender to
generate the render tree for each item in the dropdown menu. styles is
an optional set of styles that can be applied to improve the look/feel
of the items in the dropdown menu.

#### autoHighlight: Boolean (optional)
Default value: true

Whether or not to automatically highlight the top match in the dropdown
menu.

#### inputProps: Object (optional)
Default value: {}

Props passed to props.renderInput. By default these props will be
applied to the element rendered by Autocomplete, unless you
have specified a custom value for props.renderInput. Any properties
supported by HTMLInputElement can be specified, apart from the
following which are set by Autocomplete: value, autoComplete, role,
aria-autocomplete. inputProps is commonly used for (but not limited to)
placeholder, event handlers (onFocus, onBlur, etc.), autoFocus, etc..

#### isItemSelectable: Function (optional)
Default value: function() { return true }

Arguments: item: Any

Invoked when attempting to select an item. The return value is used to
determine whether the item should be selectable or not.
By default all items are selectable.

#### menuStyle: Object (optional)
Default value:
`jsx
{
borderRadius: '3px',
boxShadow: '0 2px 12px rgba(0, 0, 0, 0.1)',
background: 'rgba(255, 255, 255, 0.9)',
padding: '2px 0',
fontSize: '90%',
position: 'fixed',
overflow: 'auto',
maxHeight: '50%', // TODO: don't cheat, let it flow to the bottom
}
`

Styles that are applied to the dropdown menu in the default renderMenu
implementation. If you override renderMenu and you want to use
menuStyle you must manually apply them (this.props.menuStyle).

#### onChange: Function (optional)
Default value: function() {}

Arguments: event: Event, value: String

Invoked every time the user changes the input's value.

#### onMenuVisibilityChange: Function (optional)
Default value: function() {}

Arguments: isOpen: Boolean

Invoked every time the dropdown menu's visibility changes (i.e. every
time it is displayed/hidden).

#### onSelect: Function (optional)
Default value: function() {}

Arguments: value: String, item: Any

Invoked when the user selects an item from the dropdown menu.

#### open: Boolean (optional)
Used to override the internal logic which displays/hides the dropdown
menu. This is useful if you want to force a certain state based on your
UX/business logic. Use it together with onMenuVisibilityChange for
fine-grained control over the dropdown menu dynamics.

#### renderInput: Function (optional)
Default value:
`jsx
function(props) {
return
}
`

Arguments: props: Object

Invoked to generate the input element. The props argument is the result
of merging props.inputProps with a selection of props that are required
both for functionality and accessibility. At the very least you need to
apply props.ref and all props.on event handlers. Failing to do
this will cause Autocomplete to behave unexpectedly.

#### renderMenu: Function (optional)
Default value:
`jsx
function(items, value, style) {
return