SensorStack

Purpose

The SensorStack component contains all of the merchant-defined filtering options (that are not filters themselves) and operates differently when used within different search modes.

Usage

The SensorStack component should be added directly within the Provider.

For advanced implementations you can include your own custom sensors by using the ReactiveComponent, remember to include the componentId values to the Provider additionalComponentIds prop.

Basic

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

export const Component: React.FC = () => {
  return (
    <SensorStack />
  );
};

ExampleCustomComponent

import React from "react";
import { Provider } from "@usereactify/search";
import { ReactiveComponent } from '@appbaseio/reactivesearch';

export const ExampleCustomComponent: React.FC = () => {
  return (
    <Provider
      shopifyPermanentDomain="reactify-apps.myshopify.com"
      additionalComponentIds={["SensorSpecialProduct"]}
    >
      <ReactiveComponent
        componentId="SensorSpecialProduct"
        customQuery={() => ({
          query: {
            match: {
              product_type: "Special Product",
            },
          },
        })}
      />
    </Provider>
  );
}

Props

type SensorStackProps = {
  /** This component does not support any props */
};

Configure

The SensorStack component is configured throughout multiple areas of the Reactify Search app.