Getting Started

Ready to move ahead with Reactify Search? Start here!

1. Read the User Guide

If it's your first time working with Reactify Search its worth reading the User Guide which explains how Reactify Search and all of its features work and how to configure them.

User Guide

2. Install

Install the dependency.

npm install @usereactify/search@4

If the @appbaseio/reactivesearch package is already installed it must be pinned to version 3.14.0, other versions of the package are not supported due to performance issues.

3. Context

Wrap your search area with the Provider and set the required props to create a new Reactify Search context.

All of the search results, filters and sort options will be contained within the context, you can add more than one to a page and their data will remain separate.

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

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

4. Components

Use the built-in components such as the FilterStack, SensorStack and ResultList to begin, all visual components will render something functional by default.

import React from "react";
import { Provider, SensorStack, FilterStack, ResultList } from "@usereactify/search";

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