React Searchbox Highlight
This is a easy searchbox component ready to use with highlight and loading features.
Example Usage
import SearchBox from 'react-searchbox-highlight';
<SearchBox
items={[
{ label: 'Object 1', value: { name: 'obj1' } },
{ label: 'Object 2', value: { name: 'obj2' } },
]}
onChange={(value) => handleChange(value)}
onItemClick={(value) => handleOpenItem(value)}
/>;Properties
| Name | Type | Usage |
|---|---|---|
| items | { label: string; value: unknown }[] | Will be used to create the list of items below the searchbox |
| onChange | void | Will fire an event with the typed text that you can use to manipulate the items values or do side effects |
| onItemClick | void | Will fire an event with the value of the clicked item |
| debounceTime | number | Will be used to change the value of the debounced change event. Default: 200 (ms). |
| placeholder | string | Will be shown in the input placeholder. Default: Search... |
| highlighterStyle | Record<string, unknown> | Will apply custom style to the highlight component. Default: { color: '#fff', backgroundColor: '#9999ff' } |