Installation Guide

React

Add ChurnFast tracking to your React SPA with a single component. Works with Vite, Create React App, and any React setup.

Installation

Install the package

npm install @churnfa_st/react

bash

Add the component to your app root

Import and render the <ChurnFast /> component, passing your Site ID and the authenticated user's email:

src/App.tsx

import { ChurnFast } from '@churnfa_st/react';
import { useAuth } from './hooks/use-auth';

function App() {
  const { user } = useAuth();

  return (
    <>
      <RouterProvider router={router} />
      {user?.email && (
        <ChurnFast
          siteId="YOUR_SITE_ID"
          email={user.email}
        />
      )}
    </>
  );
}

tsx

Verify installation

Run your app, log in as a user, then check ChurnFast's Integrations page and click Verify Installation.

What's tracked

Note

The script automatically tracks page views and session durations. Client-side navigation is detected automatically — it works with React Router, TanStack Router, and other routing libraries out of the box.

Props

Prop	Type	Required	Description
`siteId`	string	Yes	Your ChurnFast Site ID (UUID)
`email`	string	Yes	The authenticated user's email
`scriptUrl`	string	No	Override the tracking script URL

Alternative: Script tag

If you prefer not to install the package, you can add the script directly to your index.html:

index.html

<script
  src="https://yourapp.churnfa.st/e/app.js"
  data-site="YOUR_SITE_ID"
  data-email="user@example.com">
</script>

html

See the HTML / Static Sites guide for details on the script tag approach.

Next steps

Script Configuration Reference — full details on tracking behavior and the underlying script