Elastic
Start free trial Contact Sales
Loading

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.
onAutocomplete function You may provide individual handlers instead of a Connector, override individual Connector handlers, or act as middleware to Connector methods.
onResultClick function You may provide individual handlers instead of a Connector, override individual Connector handlers, or act as middleware to Connector methods.
onAutocompleteResultClick function You may provide individual handlers instead of a Connector, override individual Connector handlers, or act as middleware to Connector methods.
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 packages/search-ui/src/A11yNotifications.js#L49[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.

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,1
  setResultsPerPage: () => {},2
  current: 1,3
  setCurrent: () => {},4
  error: '',5
  isLoading: false,6
  totalResults: 1000,7
  ...
}
  1. Request State
  2. Action
  3. Request State
  4. Action
  5. Response State
  6. Response State
  7. Response 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.