Setting Cloud Region | Yext Hitchhikers Platform
Introduction
When using Search UI React, developers can optionally set what region their search experience and data is stored in. Developers will have two options, US and EU (experiences will default to US).
This preference can be configured in the HeadlessConfig which is passed to the SearchHeadlessProvider component.
Example
In the below example, we change the default region from US to EU by importing CloudRegion from @yext/search-headless-react and passing it as a prop to our config object.
// main.tsx
// Using React 17
import {
provideHeadless,
SearchHeadlessProvider,
HeadlessConfig,
CloudRegion
} from "@yext/search-headless-react";
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'
import './index.css'
const config: HeadlessConfig = {
apiKey: "YOUR API KEY",
experienceKey: "YOUR EXPERIENCE KEY",
locale: "en",
verticalKey: "YOUR VERTICAL KEY",
cloudRegion: CloudRegion.EU,
};
const searcher = provideHeadless(config);
ReactDOM.render(
<React.StrictMode>
<SearchHeadlessProvider searcher={searcher}>
<App />
</SearchHeadlessProvider>
</React.StrictMode>,
document.getElementById("root")
)
Feedback
<% elem.innerText %>