Skip to main content
npm install @tell-rs/react @tell-rs/browser
Wrap your app with TellProvider, then use hooks for tracking.
@tell-rs/react is a thin wrapper around the browser SDK. It connects Tell to React’s component lifecycle — the provider calls configure() on mount and close() on unmount. You install @tell-rs/browser alongside because that’s where the actual tracking, sessions, and transport live.

​
Setup

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

function App() {
  return (
    <TellProvider apiKey="YOUR_API_KEY" options={{ captureErrors: true }}>
      <MyApp />
    </TellProvider>
  );
}

​
With redaction

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

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

​
Hooks

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

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

  function handleSignUp(user) {
    identify(user.id, { name: user.name });
    track("Sign Up Completed", { plan: "pro" });
  }

  return <button onClick={handleSignUp}>Sign Up</button>;
}
HookReturnsNotes
useTell()Full browser SDK instanceFor advanced use cases
useTrack()(event, properties?) => voidStable ref, safe for dependency arrays
useIdentify()(userId, traits?) => voidStable ref, safe for dependency arrays

​
Direct access

For code outside of React components (utilities, background tasks): 
import { tell } from "@tell-rs/react";
tell.track("Background Task");

​
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 React package only adds lifecycle integration and hooks.