React SDK

Search UI

SizeLatest NPM version

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 @sajari/react-search-ui package.

1. Install

Install the package using yarn add or npm install.

2. Import

These will be required to build the UI.

3. Pipeline

A 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.

4. Fields

The FieldDictionary class is used to map fields in your data to the required fields to display in the UI. See the FieldDictionary docs for possible properties and values.

5. Filters

Filters must be created using the FilterBuilder and RangeFilterBuilder classes. Here we'll create some common examples for an ecommerce application:

6. App

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.

7. SearchProvider

The 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.

Completed example

Editable Example
    Site search by