FastStats Web Analytics React

[!IMPORTANT] This repository is in early development and not intended for production use.

The React provider owns one explicit browser SDK instance. Components access that instance through hooks rather than process-wide functions.

"use client";

import { Analytics, useTrack } from "@faststats/react";

export function App() {
	return <Analytics siteKey="site_123" />;
}

export function UpgradeButton() {
	const track = useTrack();
	return <button onClick={() => track("upgrade_clicked")}>Upgrade</button>;
}

useIdentify() links the visitor to a user, and useSetTraits() adds traits to the current visitor without a full identify:

const setTraits = useSetTraits();
await setTraits({ plan: "pro" });
await setTraits({ signupSource: "reddit" }, { mode: "setOnce" });

Extensions are available from tree-shakeable React subpath exports:

"use client";

import { Analytics } from "@faststats/react";
import { errorTracking } from "@faststats/react/error";
import { sessionReplay } from "@faststats/react/replay";
import { webVitals } from "@faststats/react/web-vitals";

export function FastStats() {
	return (
		<Analytics
			siteKey="site_123"
			extensions={[errorTracking(), webVitals(), sessionReplay()]}
		/>
	);
}

Feature flags

"use client";

import { Analytics } from "@faststats/react";
import { featureFlags, useFlag } from "@faststats/react/flags";

const flags = featureFlags();

export function FastStats() {
	return <Analytics siteKey="site_123" extensions={[flags]} />;
}

export function Checkout() {
	const newCheckout = useFlag("new-checkout", false);
	return newCheckout ? <NewCheckout /> : <OldCheckout />;
}

useFlag returns the default during server rendering and until flags have loaded, then re-renders with the flag's value. The first render that reads a served value records the exposure. Run faststats flags typegen <project> to type keys and values; see typed flags. useIdentify and useLogout re-evaluate flags for the new user. useFeatureFlags() returns the running instance for status, details(), setContext() and reload(); see @faststats/web for the options.