ReactifySearchProvider

Purpose

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.

Instant Search

import React from "react";
import { ReactifySearchProvider } from "@usereactify/search";

export const InstantSearch: React.FC = () => (
  <ReactifySearchProvider 
    mode="instant-search"
    shopifyPermanentDomain="usereactify-demo.myshopify.com"
    market="7494533198" // optionally the ID of the Shopify market to use
  >
    <></>
  </ReactifySearchProvider>
);

Search Page

import React from "react";
import { ReactifySearchProvider } from "@usereactify/search";

export const ExampleReactiveSearchProviderSearch: React.FC = () => (
  <ReactifySearchProvider 
    mode="search"
    shopifyPermanentDomain="usereactify-demo.myshopify.com"
    market="7494533198" // optionally the ID of the Shopify market to use
  >
    <></>
  </ReactifySearchProvider>
);

Collection Page

import React from "react";
import { ReactifySearchProvider } from "@usereactify/search";

export const ExampleReactiveSearchProviderCollection: React.FC = () => (
  <ReactifySearchProvider 
    mode="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";
    }
);