> ## Documentation Index
> Fetch the complete documentation index at: https://docs.hop.io/llms.txt
> Use this file to discover all available pages before exploring further.

# React SDK

> The Hop React library allows you to easily integrate Hop products, such as Channels and Pipe, into your frontend.

## Installation

To use the React SDK, you have to install both our vanilla JS SDK & our React
SDK into your application.

**Client JS SDK**: `@onehop/client`

**React SDK**: `@onehop/react`

#### npm

```bash theme={null}
npm i @onehop/client @onehop/react
```

#### Yarn

```bash theme={null}
yarn add @onehop/client @onehop/react
```

## Initializing the SDK

To use the React SDK within your app, you first must call the `init` method from
@onehop/client with your project ID. This should be done as early as possible in
your application's lifecycle.

Find your project ID on this page.

```jsx JSX theme={null}
import React from "react";
import { createRoot } from "react-dom/client";
import { hop } from "@onehop/client";
import App from "./App";

// hop.init should be called as early as possible in your application's lifecycle
hop.init({
	projectId: "project_xxx": // replace with your project ID
});

createRoot(document.getElementById("root")).render(<App />);
```

#### With Next.js

If using Next.js (or SSR in general), then you need to make sure that the client
gets initialized on the client-side, not the server. To do this, we recommend
initializing the Hop Client in a `useEffect` in your `_app` file, for example:

```jsx JSX theme={null}
import { useEffect } from "react";
import { hop } from "@onehop/client";

export default function MyApp({ Component, pageProps }) {
  useEffect(() => {
    if (typeof window === "undefined") {
      return;
    }

    hop.init({
      projectId: "project_xxx", // replace with your project ID
    });
  }, []);

  return <Component {...pageProps} />;
}
```