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.

The mode field is used to define which search experience to use including search, collection and instant search.

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

{
  /** 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";
    }
);