# ReactifySearchProvider

### Purpose

The ReactifySearchProvider component exposes a [React Context](https://reactjs.org/docs/context.html#contextprovider) 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.

{% tabs %}
{% tab title="Instant Search" %}

```tsx
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>
);
```

{% endtab %}

{% tab title="Search Page" %}

```tsx
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>
);
```

{% endtab %}

{% tab title="Collection Page" %}

```tsx
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>
);
```

{% endtab %}
{% endtabs %}

### Props

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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://search.docs.reactify.com.au/components/provider.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.