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>
);
optiontypedescription
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