SearchHeadlessProvider | Yext Hitchhikers Platform

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

Checkout the component properties on Github .

Back

< Search Headless

provideHeadless >

<% elem.innerText %>