The ReactifySearchProvider component exposes a React Context with the data and state information used by the Reactify Search components and hooks.
Usage
The ReactifySearchProvider component must wrap all Reactify Search components and hooks.
A separate ReactifySearchProvider component should be used for each search area, most implementations will use three, one for the search page, a second for collection pages and a third for the instant search form. This prevents search content between shared between the three areas.
import React from"react";import { ReactifySearchProvider } from"@usereactify/search";exportconstInstantSearch:React.FC= () => ( <ReactifySearchProvidermode="instant-search"shopifyPermanentDomain="usereactify-demo.myshopify.com"market="7494533198"// optionally the ID of the Shopify market to use > <></> </ReactifySearchProvider>);
import React from"react";import { ReactifySearchProvider } from"@usereactify/search";exportconstExampleReactiveSearchProviderSearch:React.FC= () => ( <ReactifySearchProvidermode="search"shopifyPermanentDomain="usereactify-demo.myshopify.com"market="7494533198"// optionally the ID of the Shopify market to use > <></> </ReactifySearchProvider>);
import React from"react";import { ReactifySearchProvider } from"@usereactify/search";exportconstExampleReactiveSearchProviderCollection:React.FC= () => ( <ReactifySearchProvidermode="collection"shopifyPermanentDomain="usereactify-demo.myshopify.com"collectionHandle="example-collection"market="7494533198"// optionally the ID of the Shopify market to use > <></> </ReactifySearchProvider>);
Props
{/** Standard react children */ children?:React.ReactNode |undefined;/** The search area the provider will be used in */ mode:"search"|"collection"|"instant-search";/** Shopify store domain used to resolve the site configuration */ shopifyPermanentDomain: string;/** Market ID used to change merchandising based on market e.g. 7494533198 */ market?: string;/** Callback function for redirects, suitable for headless sites to avoid full page refresh */ onRedirect?: (type:"redirect"|"search", url:string) =>void;/** Render method to display a component when the config is loading */ renderBooting?: () =>JSX.Element |null;/** Advanced usage: Override the default Reactify Search id (for telemetry) */ clientId?: string;/** Advanced usage: Override the default Filters selection logic */ filtersHandle?: string;/** Advanced usage: Array of additional component IDs managed outside of Reactify Search */ additionalComponentIds?: Array<string>;/** Advanced usage: Override the default Elasticsearch index */ index?: string;/** Advanced usage: Override the default Reactify Search config (for multi-instance stores) */ configId?: string;/** Advanced usage: Override the default Elasticsearch credentials */ credentials?: string;/** Advanced usage: Override the default ReactiveBase theme */ theme?: Record<string, unknown>;/** Advanced usage: Fields to include in the Elasticsearch response e.g. ["title"] */ includeFields?: Array<string>;/** Advanced usage: Fields to exclude from the Elasticsearch response e.g. ["variant_skus", "*price*"] */ excludeFields?: Array<string>;/** Advanced usage: Flags are used to enable or disable specific features within Reactify Search */ flags?: Record<string, boolean>;/** Advanced usage: Server content for SSR */ preload?: { config: Config; state: unknown; }} & (| { mode:"search"; }| { mode:"collection";/** Collection object that includes the handle, used to find curations */ collectionHandle: string; }| { mode:"instant-search"; });