react-search-bar

search bar with autosuggest

Usage no npm install needed!

<script type="module">
  import reactSearchBar from 'https://cdn.skypack.dev/react-search-bar';
</script>

README

NOTE: This library is no longer under active development. Do with it as you will. If you're looking for an alternative, please use the excellent WAI-ARIA compliant react-autosuggest instead.

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

Development

npm start
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 should be 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 custom render suggestions
suggestions array<string> ✓ Flat array of suggestions

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

1 Only when renderSearchButton is true

License

MIT