supapulseOverview
@supapulse/react gives React apps a provider and three hooks on top of @supapulse/core. Works with Next.js, Remix and React Router.
@supapulse/react is a thin layer over @supapulse/core: a provider that creates and initializes one tracker, and hooks to reach it. It's about 0.6 KB gzipped on top of core.
npm install @supapulse/core @supapulse/reactQuick start
import { SupapulseProvider, useEvent } from '@supapulse/react';
const config = { apiToken: 'pub_your_token' };
export function App() {
return (
<SupapulseProvider config={config}>
<SignupButton />
</SupapulseProvider>
);
}
function SignupButton() {
const trackEvent = useEvent();
return <button onClick={() => trackEvent('signup_click')}>Sign up</button>;
}That's a complete setup. Pageviews, including client-side route changes, are sent by the core tracker; you don't need a hook for them.
What's in the package
| Export | What it does |
|---|---|
<SupapulseProvider config> | Creates a tracker and calls init(config) after the first render. |
useSupapulse() | Returns the tracker. Calls made before it's initialized are dropped. |
useEvent() | Returns trackEvent(name, properties?). |
useIdentify() | Returns identify(customerId), which links the visitor to your customer ID for revenue. |
usePageview(options?) | Sends pageviews yourself, for apps that set autoPageviews: false. Does nothing otherwise. |
SupapulseContext | The raw context: { supapulse, isReady, autoPageviews, error }. |
It also re-exports the core types SupapulseConfig, SupapulseCore and EventData.
Routers
The core tracker listens to the History API, which React Router, Next.js and Remix all use, so route changes are tracked as soon as the provider is mounted. Guides:
Server rendering
The provider only initializes the tracker in an effect, so it renders on the server without touching window. In the Next.js App Router, wrap the provider in your own client component. See SSR support.