Sensors

Purpose

The Sensors 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 Sensors component should be added directly within the ReactifySearchProvider.

For advanced implementations you can include your own custom sensors by using the CustomComponent, remember to include the componentId values to the ReactifySearchProvider additionalComponentHandles prop.

Basic

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

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

ExampleCustomComponent

import React from "react";
import { ReactifySearchProvider, CustomComponent } from "@usereactify/search";

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

Props

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

Configure

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