1.3.0 • Published 11 months ago
react-search-dialog v1.3.0
React Search Dialog🔎 
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!
Features
- ✅ 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)
Examples
🚧 Coming soon!
Props
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. |