TanStack Router

npm install @tell-rs/react @tell-rs/browser

// src/routes/__root.tsx
import { createRootRoute, Outlet, useLocation } from "@tanstack/react-router";
import { TellProvider, useTell } from "@tell-rs/react";
import { useEffect, type ReactNode } from "react";

function TellPageTracker() {
  const tell = useTell();
  const location = useLocation();

  useEffect(() => {
    tell.track("Page Viewed", {
      url: window.location.href,
      path: location.pathname,
      referrer: document.referrer,
      title: document.title,
    });
  }, [location.pathname, tell]);

  return null;
}

export const Route = createRootRoute({
  component: RootComponent,
});

function RootComponent() {
  return (
    <TellProvider apiKey="YOUR_API_KEY">
      <Outlet />
      <TellPageTracker />
    </TellProvider>
  );
}

import { useTrack } from "@tell-rs/react";

function SignUpButton() {
  const track = useTrack();

  return (
    <button onClick={() => track("Sign Up Clicked", { plan: "pro" })}>
      Sign Up
    </button>
  );
}

import { useIdentify } from "@tell-rs/react";

function LoginForm() {
  const identify = useIdentify();

  function onLogin(user: { id: string; email: string }) {
    identify(user.id, { email: user.email });
  }

  // ...
}

import { Tell, production } from "@tell-rs/node";

const tell = new Tell(production("YOUR_API_KEY"));

// In a server function
tell.track("user_123", "Order Completed", { total: 99.99 });

import { TellProvider } from "@tell-rs/react";
import { redact, SENSITIVE_PARAMS } from "@tell-rs/browser";

function RootComponent() {
  return (
    <TellProvider
      apiKey="YOUR_API_KEY"
      options={{
        beforeSend: redact({ stripParams: SENSITIVE_PARAMS }),
        captureErrors: true,
      }}
    >
      <Outlet />
      <TellPageTracker />
    </TellProvider>
  );
}