This is a easy searchbox component ready to use with highlight and loading features.
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)}
/>;
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' } |