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 dependencies.

npm install @usereactify/search

3. Context

Wrap your search area with the ReactifySearchProvider 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 { ReactifySearchProvider } from "@usereactify/search";

export const SearchPage: React.FC = () => (
  <ReactifySearchProvider
    mode="search"
    shopifyPermanentDomain="usereactify-demo.myshopify.com"
    market="12345" // optionally the ID of the Shopify market to use
  >
    ...
  </ReactifySearchProvider>
);

4. Components

Use the built-in components such as the Filters, Sensors and Results to begin, all visual components will render something functional by default.

import React from "react";
import { ReactifySearchProvider, Sensors, Filters, Results } from "@usereactify/search";

export const SearchPage: React.FC = () => (
  <ReactifySearchProvider
    mode="search"
    shopifyPermanentDomain="usereactify-demo.myshopify.com"
    market="12345" // optionally the ID of the Shopify market to use
  >
    <Sensors />
    <Filters />
    <Results />
    ...
  </ReactifySearchProvider>
);