A general-purpose search bar, built in React. View the demo.

Development

To run the dev server:

npm start

To run tests and lint:

npm run check

Props

| Prop | Type | Required | Description | | :----------------- | :---------------- | :-------------------------------: | :---------- | | autoFocus | boolean | | If true, focuses the input when the component loads | | delay | number | | The number of milliseconds to wait after the last key stroke before calling onChange | | onChange | function | ✓ | Called when input changes | | onClear | function | ✓ | Called when suggestions are cleared | | onSearch | function | ✓1 | Called when clicking the search button or enter (presumes that search button is available) | | onSelection | function | | Called when selecting a suggestion | | renderClearButton | boolean | | Flag indicating whether to display the clear button | | renderSearchButton | boolean | | Flag indicating whether to display the search button | | style | object | | Style object | | suggestionRenderer | function | | Function to render suggestions | | suggestions | array<string> | ✓ | Array of suggestions |

Also accepts supported HTML attributes for the <input> element.

1 Only when renderSearchButton is true

License

MIT