React SDK

@cohorly/react provides React bindings for Cohorly. <CohorlyProvider> initializes the @cohorly/web client on mount, and useCohorly() gives any descendant access to it.

Install

bash

pnpm add @cohorly/react
# or: npm install @cohorly/react

Requires React 18+ (peer dependency).

Wrap your app

<CohorlyProvider> is a client component. Its props are the same options as @cohorly/web's init(): apiHost, token, trackPageviews, flushIntervalMs, batchSize, superProperties, debug. Place it near the root of the tree that needs tracking.

tsx

import { CohorlyProvider, useCohorly } from "@cohorly/react";

function App() {
  return (
    <CohorlyProvider
      apiHost="https://api.cohorly.com"
      token="YOUR_PROJECT_TOKEN"
      trackPageviews
    >
      <Dashboard />
    </CohorlyProvider>
  );
}

useCohorly()

useCohorly() returns the same client shape as the @cohorly/web singleton: track, identify, reset, register, unregister, people.*, flush, getDistinctId, and isAnonymous. It throws if called outside a provider.

tsx

function Dashboard() {
  const cohorly = useCohorly();
  return (
    <button
      onClick={() => cohorly.track("Button Clicked", { button: "upgrade" })}
    >
      Upgrade
    </button>
  );
}

Identify on login

tsx

function useAuthTracking(user: { id: string } | null) {
  const cohorly = useCohorly();
  useEffect(() => {
    if (user) cohorly.identify(user.id);
    else cohorly.reset();
  }, [user, cohorly]);
}

For a full API reference of the returned client (super properties, people profiles, flush), see the Web SDK.