Examples

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>
  );
}

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],
  );
}

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>
  );
}

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>;
}

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

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

  return null;
}