React

This guide covers a standard client-side React app (Vite, CRA, etc.). For Next.js, see the Next.js guide.

Install

npm install @leapio/web

Initialize

Call leapio.init once, as early as possible — in your entry file, before rendering:

// src/main.tsx
import leapio from '@leapio/web';
import { createRoot } from 'react-dom/client';
import App from './App';

leapio.init({
  publicKey: 'YOUR_PUBLIC_KEY',
  enableAutoPageviews: true,
});

createRoot(document.getElementById('root')!).render(<App />);

Find your public key in Project settings.

Single-page app routing: enableAutoPageviews tracks history changes automatically. If you use a router that doesn't push to history (rare), call leapio.pageview() on route change instead.

Track Events

Track from any event handler:

import leapio from '@leapio/web';

function SubscribeButton() {
  return (
    <button
      onClick={() =>
        leapio.track({ event: 'UserSubscribed', metadata: { plan: 'pro' } })
      }
    >
      Subscribe
    </button>
  );
}

You can also auto-capture clicks without writing handlers — add the leapio- class:

<button className="leapio-sign-up">Sign up</button>
// fires a "Sign Up" event on click

…or enable full autocapture in init with autocapture: true.

Identify Users

leapio.identify('john@doe.com', { plan: 'pro' });

Call leapio.reset() on logout to stop linking events to that user.

Consent (Optional)

leapio.setConsent({ analytics: true });

See How Tracking and Identity Works for the consent model.

Verify It's Working

Start your dev server, interact with the app, and watch events land in the Leapio dashboard within seconds.

Related

• JS SDK reference
• How Tracking and Identity Works
• Track API