A batteries included search component that aims to make implementing a modern search experience in your application as easy as possible.
With a focus on performance and not reinventing the wheel, React Search Dialog is built on top of battle tested libraries Fuse.js and react-window so that no matter the item list, you'll get the results you're looking for near instantly!
- ✅ Handles massive data sets with ease
- ✅ Live results as you type
- ✅ Out of the box styling, with ability to customize as needed
- ✅ Mobile friendly
- ✅ Optional render functions for search results and recent items
- ✅ Built in recent search history (with ability to disable)
- ✅ Optional quick select section for common search items (fully customizable)
🚧 Coming soon!
Below is a table of all props exposed by the Search
component. The majority of this table is a pared down, more digestible version of the exported type SearchProps
so
if more detail is needed, please feel free to refer to the type definitions directly!
Key | |
---|---|
✅ | Required |
⚠ | Conditionally Optional |
❌ | Optional |
Required | Prop Name | Prop Type | Description |
---|---|---|---|
✅ | items |
Array of T (generic) |
The items to search through. IMPORTANT: T must have a label property OR be a string.
|
⚠ | onItemSelect |
(item: T) => void |
Callback to fire when an item is selected. IMPORTANT: When NOT passing in your own render function with renderResult , this prop is required so that an action can be taken on search result / recent click.
|
❌ | buttonProps |
ButtonProps OR (isSmallScreen: boolean) => ButtonProps |
Props to pass to the button that opens the search dialog. Click here to read more about the props available to the Button component |
❌ | placeholder |
string |
The placeholder text to display in the search input |
❌ | quickFillTitle |
string |
The title used for the quick fill section of the search dialog |
❌ | itemHeight |
number or ItemHeightPreset
|
Height of each item in the search results |
❌ | quickFillItems |
Array of T (generic) |
Items to display in the quick fill section |
❌ | maxHeight |
string or number
|
Maximum height of the search dialog |
❌ | maxWidth |
string or number
|
Maximum width of the search dialog |
❌ | noHistory |
boolean |
Whether or not to record or display recent search history |
❌ | renderResult |
({ item, smallDisplay, closeDialog, addToRecents }) => JSX.Element |
Callback to render a single search result IMPORTANT: Because you're supplying the render function for each search result, it's up to you to use the addToRecents function when a selection is made by the user, and the closeDialog function when you see it appropriate for the search dialog to close.
|
❌ | renderRecent |
({ item, smallDisplay, closeDialog, addToRecents }) => JSX.Element |
Callback to render a single recent search item IMPORTANT: Because you're supplying the render function for each recent search item, it's up to you to use the addToRecents function when a selection is made by the user, and the closeDialog function when you see it appropriate for the search dialog to close.
|