Skip to main content
npm install @tell-rs/react @tell-rs/browser
Use @tell-rs/react with a small page tracker component that watches TanStack Router’s useLocation().
There is no separate @tell-rs/tanstack package. TanStack Router integration uses the React SDK directly — you just add a <TellPageTracker /> component that listens for route changes.

​
Setup

​
1. Add the provider and page tracker

// 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>
  );
}
TellPageTracker fires a Page Viewed event on mount and whenever location.pathname changes. Place it inside TellProvider so useTell() resolves.

​
2. Track events

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

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

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

​
3. Identify users

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

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

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

  // ...
}

​
With TanStack Start (SSR)

TanStack Start renders on the server first. The browser SDK requires window and document, so tracking only runs client-side. This works automatically — TellProvider calls configure() inside a useEffect, which only fires in the browser. For server-side tracking in API routes or server functions, use the Node.js SDK: 
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 });

​
With redaction

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

​
What you get from the browser SDK

All features documented in the browser SDK guide are available — sessions, device context, super properties, structured logging, opt-out, and beforeSend hooks. The page tracker component only adds route-change awareness.