@radiate-so/react

Official React bindings for Radiate — provider, hooks, and components on top of @radiate-so/browser-sdk.

Install

pnpm add @radiate-so/react

react (>= 18.2) is a peer dependency. The browser SDK is pulled in transitively.

Quick start

import { RadiateProvider, SegmentGate, useTrack } from '@radiate-so/react'

function App() {
  return (
    <RadiateProvider publicKey={import.meta.env.VITE_RADIATE_PK}>
      <Page />
    </RadiateProvider>
  )
}

function Page() {
  const track = useTrack()
  return (
    <>
      <SegmentGate id="power_user" fallback={<HeroDefault />}>
        <HeroAdvanced />
      </SegmentGate>
      <button onClick={() => track('cta_clicked', { name: 'hero' })}>
        Get started
      </button>
    </>
  )
}

API at a glance

| Name | Purpose | | --- | --- | | <RadiateProvider> | Owns the RadiateBrowser instance. Pass config OR a pre-built client. | | useRadiate() | The raw client (or null during SSR). | | useSegment(id) | boolean \| null — membership for one segment. | | useSegments() | string[] \| null — every segment the visitor is in. | | usePersonas() | Record<string, number> \| null — persona scores. | | useProfile() | MeResponse \| null — { id, segments, personas }. | | useIdentify(user) | Syncs identify/reset to your auth state; auto-refreshes all read hooks. | | useTrack() | Stable (event, props?) => void. Safe to call during SSR (no-op). | | <SegmentGate> | Declarative gated rendering. |

See the full docs at docs.radiate.so/recipes/react/.

Server-rendered apps (Next.js, TanStack Start, etc.)

<RadiateProvider> is marked 'use client'. During SSR all read hooks return null and useTrack/useIdentify no-op; once the client hydrates they wire up to a real RadiateBrowser and re-render. Mount the provider inside a client boundary near the root of your app.

License

MIT