# 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 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](/sdks/web).