Skip to content
  • SDKs
  • Client Side
  • React

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

npm i @onehop/client @onehop/react

Yarn

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.

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:

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} />;
}
Last updated on September 21, 2022