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 {
} from "@yext/search-headless-react";

const searcher = provideHeadless({
  experienceKey: "ecomm-search",
  locale: "en",

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

See the provideHeadless reference doc for more configuration options.

Component API

Checkout the component properties on Github .