Hop home pagelight logo
Client Side
React SDK

​
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.

JSX
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
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} />;
}