Easy to use search components to quickly build a beautiful search interface. If you've used previous versions of our React SDK, you'll be most familiar with this package.
Let's run through building an example UI using the
Install the package using
yarn add or
These will be required to build the UI.
Pipeline is required to perform search queries. For this example, we'll use a demo pipeline using a Best Buy data set. Replace the values from your collection credentials.
Create a demo app, using the following search UI components:
Input- Used to capture query input via a text field. It can also provide suggestions, typeahead and instant search modes.
Summary- Used to display display the number of results and the latency from a search query.
Sorting- Used to capture user input on how to sort search results
ResultsPerPage- Used to capture user input for how many results displayed per page.
ViewType- Used to allow toggling between viewing modes of results.
Filter- Used to render filter options allowing refining of search results.
Results- Used to display results response from a search query.
Pagination- Used for paging through paged result sets.
SearchProvider should be used as a wrapper for the entire application to provide a way to share application state between components, for example, the current query, active filters or the search response. See
SearchProvider for more information.