brily-flow-react

React Provider + hook for Brily Flows. Thin wrapper over brily-flow.

Install

npm i brily-flow brily-flow-react

Use

// app/root.tsx
import { BrilyFlowProvider } from 'brily-flow-react';

export default function Root({ children }: { children: React.ReactNode }) {
  return (
    <BrilyFlowProvider
      token={process.env.NEXT_PUBLIC_BRILY_TOKEN!}
      cookieDomain=".example.com"
    >
      {children}
    </BrilyFlowProvider>
  );
}

In any child component:

import { useBrilyFlow } from 'brily-flow-react';

function CheckoutButton({ plan }: { plan: string }) {
  const { track } = useBrilyFlow();
  return (
    <button onClick={() => track('checkout.started', { plan })}>
      Buy {plan}
    </button>
  );
}

Auto-identify on login:

import { useIdentifyOnAuth } from 'brily-flow-react';

function App() {
  const { user } = useAuth();
  useIdentifyOnAuth(user?.id);   // fires identify() once when user signs in
  // ...
}

Fire a single track call on mount:

<BrilyTrack event="pricing.viewed" properties={{ tier: 'pro' }} />

What gets captured automatically

$pageview events on every route change (including SPA navigations via the History API). Disable with <BrilyFlowProvider autocapture={false} /> if you want manual control.

Next.js App Router note

The provider must render client-side. Mark its file with "use client":

'use client';
import { BrilyFlowProvider } from 'brily-flow-react';
export { BrilyFlowProvider };

Then use that re-export in your layout.tsx.

License

MIT