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.