Provider

Purpose

The Provider component exposes a React Context with the data and state information used by the Reactify Search components and hooks.

Usage

The Provider component must wrap all Reactify Search components and hooks.

A separate Provider 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 { Provider } from "@usereactify/search";

export const InstantSearch: React.FC = () => (
  <Provider
    instantSearch={true}
    index="reactify-search"
    shopifyPermanentDomain="reactify-apps.myshopify.com"
  >
    ...
  </Provider>
);

Search Page

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

export const SearchPage: React.FC = () => (
  <Provider 
    index="reactify-search"
    shopifyPermanentDomain="reactify-apps.myshopify.com"
  >
    ...
  </Provider>
);

Collection Page

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

export const CollectionPage: React.FC = () => (
  <Provider 
    index="reactify-search"
    shopifyPermanentDomain="reactify-apps.myshopify.com"
    collection={{ handle: "all" }}
  >
    ...
  </Provider>
);

Props

type ProviderProps = {
  /** Reactify search index name in settings */
  index: string;
  /** Shopify store domain used to resolve the site configuration */
  shopifyPermanentDomain: string;
  /** Set when in instant search mode, applies different sensors */
  instantSearch?: boolean;
  /** 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 Filters selection logic */
  filterStackHandle?: string;
  /** Advanced usage: Allows you to wrap the ReactifySearchProvider in your own ReactiveBase component */
  noReactiveBase?: boolean;
  /** Advanced usage: Array of additional component IDs managed outside of Reactify Search */
  additionalComponentIds?: string[];
  /** Advanced usage: Override the default Reactify Search config (for multi-instance stores) */
  configId?: string;
  /** Advanced usage: Override the default Elasticsearch credentials */
  credentials?: {
    username: string;
    password: string;
    endpoint: string;
  };
  /** Advanced usage: Override the default ReactiveBase theme */
  theme?: Record<string, unknown>;
}