# Examples

URL: https://supapulse.app/docs/react/examples

Common analytics patterns with @supapulse/react hooks, from button clicks to passing the session ID to checkout.

## Provider and a tracked button [#provider-and-a-tracked-button]

```tsx
import { SupapulseProvider, useEvent } from '@supapulse/react';

const config = { apiToken: import.meta.env.VITE_SUPAPULSE_TOKEN };

export function App() {
  return (
    <SupapulseProvider config={config}>
      <Hero />
    </SupapulseProvider>
  );
}

function Hero() {
  const trackEvent = useEvent();
  return (
    <a href="/signup" onClick={() => trackEvent('cta_click', { location: 'hero' })}>
      Start free trial
    </a>
  );
}
```

## A small custom hook [#a-small-custom-hook]

```tsx
import { useSupapulse } from '@supapulse/react';
import { useCallback } from 'react';

/** Like useEvent, with the event name prefixed. */
export function useTrack() {
  const supapulse = useSupapulse();
  return useCallback(
    (name: string, data?: Record<string, unknown>) => {
      supapulse.event(`app_${name}`, data);
    },
    [supapulse],
  );
}
```

## Form submissions [#form-submissions]

```tsx
function NewsletterForm() {
  const track = useTrack();

  return (
    <form
      onSubmit={(event) => {
        track('newsletter_signup', { form: 'footer' });
        // submit…
      }}
    >
      <input type="email" name="email" aria-label="Email" />
      <button>Subscribe</button>
    </form>
  );
}
```

Don't put the email address in the event.

## Checkout with the session ID [#checkout-with-the-session-id]

```tsx
import { useSupapulse } from '@supapulse/react';

function UpgradeButton({ priceId }: { priceId: string }) {
  const supapulse = useSupapulse();

  async function upgrade() {
    const response = await fetch('/api/checkout', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        priceId,
        fingerprint: await supapulse.getVisitorFingerprint(),
        sessionId: supapulse.getSessionId(),
      }),
    });
    window.location.href = (await response.json()).url;
  }

  return <button onClick={upgrade}>Upgrade</button>;
}
```

The server side is in the [Stripe guide](https://supapulse.app/docs/guides/stripe).

## Tracking only when a condition holds [#tracking-only-when-a-condition-holds]

```tsx
function FeatureTour({ isFirstVisit }: { isFirstVisit: boolean }) {
  const supapulse = useSupapulse();

  useEffect(() => {
    if (supapulse && isFirstVisit) {
      supapulse.event('tour_started');
    }
  }, [supapulse, isFirstVisit]);

  return null;
}
```