SearchProvider

The SearchProvider is a React wrapper around the Headless Core, and makes state and actions available to Search UI and in a React Context, and also via a Render Prop.

It looks like this:

import { SearchProvider, SearchBox } from "@elastic/react-search-ui";
import AppSearchAPIConnector from "@elastic/search-ui-app-search-connector";

const connector = new AppSearchAPIConnector({
  searchKey: "search-371auk61r2bwqtdzocdgutmg",
  engineName: "search-ui-examples",
  endpointBase: "http://my-app-search-host:3002"
});

const configurationOptions = {
  apiConnector: connector,
  searchQuery: { ... },
  autocompleteQuery: { ... },
  hasA11yNotifications: true,
  a11yNotificationMessages: {
    searchResults: ({ start, end, totalResults, searchTerm }) =>
      `Searching for "${searchTerm}". Showing ${start} to ${end} results out of ${totalResults}.`
  },
  alwaysSearchOnInitialLoad: true
};

const App = () => (
  <SearchProvider config={configurationOptions}>
    <div className="App">
      <SearchBox />
    </div>
  </SearchProvider>
);

option	type	description
`apiConnector`	APIConnector	Instance of a Connector. See Connectors API section.
`onSearch`	function	You may provide individual handlers instead of a Connector, override individual Connector handlers, or act as middleware to Connector methods. See Handlers for more information.
`onAutocomplete`	function	You may provide individual handlers instead of a Connector, override individual Connector handlers, or act as middleware to Connector methods. See Handlers for more information.
`onResultClick`	function	You may provide individual handlers instead of a Connector, override individual Connector handlers, or act as middleware to Connector methods. See Handlers for more information.
`onAutocompleteResultClick`	function	You may provide individual handlers instead of a Connector, override individual Connector handlers, or act as middleware to Connector methods. See Handlers for more information.
`autocompleteQuery`	Autocomplete Query Config	Configuration options for the autocomplete query.
`debug`	Boolean	Trace log actions and state changes. Default is false.
`initialState`	Object	Set inital state of Search UI. See Initial State for more information.
`searchQuery`	Search Query Config	Configuration options for the main search query.
`trackUrlState`	Boolean	By default, Request State will be synced with the browser url. To turn this off, pass `false`.
`urlPushDebounceLength`	Integer	The amount of time in milliseconds to debounce/delay updating the browser url after the UI update. This, for example, prevents excessive history entries while a user is still typing in a live search box. Default is 500.
`hasA11yNotifications`	Boolean	Search UI will create a visually hidden live region to announce search results & other actions to screen reader users. This accessibility feature will be turned on by default in our 2.0 release. Default is false.
`a11yNotificationMessages`	Object	You can override our default screen reader messages (e.g. for localization), or create your own custom notification, by passing in your own key and message function(s).
`alwaysSearchOnInitialLoad`	Boolean	If true, Search UI will always do an initial search, even when no inital Request State is set.

Context

The "Context" is a flattened object containing, as keys, all State and Actions.

We refer to it as "Context" because it is implemented with a React Context.

ex.

{
  resultsPerPage: 10, // Request State
  setResultsPerPage: () => {}, // Action
  current: 1, // Request State
  setCurrent: () => {}, // Action
  error: '', // Response State
  isLoading: false, // Response State
  totalResults: 1000, // Response State
  ...
}

Initial State

This is useful for defaulting a search term, sort, etc.

Example

  initialState: { searchTerm: "test", resultsPerPage: 40 }

See Request State for more properties that can be set in initial state.

On this page

Article navigation

Context

Initial State