> ## Documentation Index
> Fetch the complete documentation index at: https://learn.biq.li/llms.txt
> Use this file to discover all available pages before exploring further.

# React

> Install the Biqli provider and track conversions from React components.

The React integration uses the same browser SDK with a provider and hook. The provider owns startup and cleanup, including React Strict Mode remounts.

## Install

```bash theme={null}
npm install @biqli/analytics
```

## Add the provider

Create the configuration outside the component tree so React does not create a new SDK instance on every render.

```tsx theme={null}
import {BiqliProvider} from '@biqli/analytics/react';

const biqliConfig = {
  publishableKey: 'biqli_pk_xxxxxxxxx',
  attributionModel: 'last-click' as const,
  cookieOptions: {expiresInDays: 90},
};

export function AppRoot() {
  return (
    <BiqliProvider config={biqliConfig}>
      <App />
    </BiqliProvider>
  );
}
```

Wrap your application once, as close to the root as practical.

## Track a lead

```tsx theme={null}
import {useBiqli} from '@biqli/analytics/react';

export function SignupButton({customer}) {
  const {trackLead} = useBiqli();

  async function recordSignup() {
    await trackLead({
      eventId: `signup:${customer.id}`,
      eventName: 'Signed up',
      customerExternalId: customer.id,
      customerName: customer.name,
      customerEmail: customer.email,
    });
  }

  return <button onClick={recordSignup}>Create account</button>;
}
```

In production, send the event after the signup succeeds—not merely when the button is pressed.

## Available hook values

`useBiqli()` returns:

* `sdk`: the underlying `BiqliAnalytics` instance
* `trackClick`, `trackLead`, and `trackSale`
* `storeStripeSession` for the built-in Stripe browser adapter
* `getClickId`
* `setConsent`
* `decorateUrl`

`useBiqliAnalytics` is an alias of `useBiqli`.

## Server-rendered React

Use `@biqli/analytics` only in client components or browser-owned code. Use `@biqli/sdk` in server routes, actions, jobs, and verified webhooks.

<Warning>
  Do not construct the configuration inline during every render. A changing object causes the provider to replace its SDK instance.
</Warning>

The provider has been designed for React Strict Mode. It does not leave duplicate history listeners, timers, or dynamic-link handlers after cleanup.