---
title: "Integrating Brainfish Widgets with React"
description: "1. Install the Brainfish Dependency"
canonical_url: "https://help.brainfi.sh/articles/integrating-brainfish-widgets-with-react-zzyuRXbFWH"
md_url: "https://help.brainfi.sh/articles/integrating-brainfish-widgets-with-react-zzyuRXbFWH.md"
---
# Integrating Brainfish Widgets with React

### **1. Install the Brainfish Dependency**

Install the Brainfish library in your React project using the following command:

```bash
npm install @brainfish-ai/web-widget
```

### 2. **Create the Search Widget Component**

Create a file named `BrainfishSearch.js` and add the following code:

```javascript
import Brainfish from '@brainfish-ai/web-widget';
import React from 'react';

// TypeScript declaration for JSX intrinsic elements (allows use of custom HTML elements)
declare global {
  namespace JSX {
    interface IntrinsicElements {
      "brainfish-search-widget": React.DetailedHTMLProps<
        React.HTMLAttributes<HTMLElement>,
        HTMLElement
      > & { class?: string };
    }
  }
}

function BrainfishSearch({ widgetKey }) {
  // Initialize the Brainfish search widget when the component is mounted
  React.useEffect(() => {
    Brainfish.Widgets.init({
      widgetKey: widgetKey, // Your unique widget key
    });
  }, [widgetKey]);

  return (
    <brainfish-search-widget class="custom-class" />
  );
}

export default BrainfishSearch;
```

### Notes

* `widgetKey`: Replace `'YOUR_WIDGET_KEY'` with your actual widget key provided by Brainfish.
* **Styling**: Use the `class` attribute to apply custom styles.