# CustomComponent

### Purpose

The CustomComponent component is a wrapper for the [ReactiveComponent](https://opensource.appbase.io/reactive-manual/advanced/reactivecomponent.html) from the **@appbaseio/reactivesearch** package, it allows for all advanced implementations to limit their imports to the Reactify Search package.

### Usage

Further usage documentation is available [here](https://docs.reactivesearch.io/docs/reactivesearch/v3/advanced/reactivecomponent/).

{% tabs %}
{% 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 CustomComponentProps = React.ComponentProps<
  typeof ReactiveComponent
>;
```