# 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](https://search.docs.reactify.com.au/components/provider).

For advanced implementations you can include your own custom sensors by using the [CustomComponent](https://search.docs.reactify.com.au/components/customcomponent), remember to include the `componentId` values to the [ReactifySearchProvider](https://search.docs.reactify.com.au/components/provider) `additionalComponentHandles` prop.

{% tabs %}
{% tab title="Basic" %}

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

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

{% endtab %}

{% tab title="ExampleCustomComponent" %}

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

{% endtab %}
{% endtabs %}

### Props

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

### Configure

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