# Provider

### Purpose

The Provider 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 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.

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

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

{% endtab %}

{% tab title="Search Page" %}

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

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

{% endtab %}

{% tab title="Collection Page" %}

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

{% endtab %}
{% endtabs %}

### Props

```typescript
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>;
}
```


---

# 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/4/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.