SearchHeadlessProvider

Who does this article apply to?

Enterprise, Partner, and Small Business accounts.
Accounts in all regions.

Any components that use Search UI React components need to be wrapped in a <SearchHeadlessProvider/>. This gives the components access to a SearchHeadless instance and access to the Headless React hooks. If you've used the React Context API, you'll be familiar with this pattern.

Basic Example

You can add the <SearchHeadlessProvider/> at the entry point of your app.

Here is an example of a component used to wrap templates in Yext Pages:

import {
  provideHeadless,
  SearchHeadlessProvider,
} from "@yext/search-headless-react";

const searcher = provideHeadless({
  apiKey: YEXT_PUBLIC_SEARCH_API_KEY,
  experienceKey: "ecomm-search",
  locale: "en",
});

const Main = ({ children }: { children: React.ReactNode }) => {
  return (
    <SearchHeadlessProvider searcher={searcher}>
      {children}
    </SearchHeadlessProvider>
  );
};

See the provideHeadless reference doc for more configuration options.

Component API

Check out the component properties on GitHub.