@faststats/react

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.