@wyvrn-analytics/react

React Provider + hooks for the Wyvrn Analytics SDK.

Install

pnpm add @wyvrn-analytics/react

This package pulls in @wyvrn-analytics/core automatically.

Quick start

// app.tsx
import { WyvrnProvider } from '@wyvrn-analytics/react'

export function App() {
  return (
    <WyvrnProvider
      config={{
        apiKey: 'pk_xxxxx',
        endpoint: 'http://localhost:3000',
        debug: true,
      }}
    >
      <Routes />
    </WyvrnProvider>
  )
}

// any component
import { useTrack, useIdentify, useReset } from '@wyvrn-analytics/react'

export function SignupButton() {
  const track = useTrack()
  return (
    <button onClick={() => track('signup_clicked', { plan: 'pro' })}>
      Sign up
    </button>
  )
}

export function LoginEffect({ userId }: { userId: string }) {
  const identify = useIdentify()
  useEffect(() => { identify(userId) }, [userId, identify])
  return null
}

export function LogoutButton() {
  const reset = useReset()
  return <button onClick={reset}>Log out</button>
}

Auto pageview

<WyvrnProvider> patches history.pushState / replaceState and listens to popstate, then calls client.page() on every URL change. Works with React Router, TanStack Router, Next App Router — anything that uses the History API.

Disable by passing autoCapturePageView={false} and call usePage() manually if you want full control.

Hooks

• useWyvrn() — escape hatch, returns the underlying Client
• useTrack() — stable (name, props?) => void
• usePage() — stable (name?, props?) => void
• useIdentify() — stable (userId, traits?) => void
• useReset() — stable () => void