react-fathom

Easily integrate Fathom Analytics into your applications with automatic pageview tracking, custom event tracking, and full TypeScript support.

Why Fathom?

#

Fathom Analytics is a privacy-focused alternative to Google Analytics. Unlike traditional analytics platforms:

• No cookies required — GDPR, CCPA, and PECR compliant out of the box
• No personal data collection — Respects user privacy by design
• No consent banners needed — Simplified compliance for your websites
• Fast and lightweight — Won't slow down your site

New to Fathom? Get a $10 credit when you sign up using this referral link.

Why react-fathom?

#

The official fathom-client works, but react-fathom provides a better developer experience:

Features

#

• Zero-config Fathom Analytics integration for React
• Tree-shakeable — Only bundle what you use
• Automatic pageview tracking for Next.js (Pages Router & App Router)
• React Native support with offline queuing and navigation tracking
• Full TypeScript support with type definitions
• Flexible — Works with any React app, Next.js, or React Native
• Lightweight — Minimal bundle size impact

Quick Start

#

npm install react-fathom fathom-client

import { FathomProvider } from 'react-fathom'

function App() {
  return (
    <FathomProvider siteId="YOUR_FATHOM_SITE_ID">
      <YourApp />
    </FathomProvider>
  )
}

import { useFathom } from 'react-fathom'

function MyComponent() {
  const { trackEvent } = useFathom()

  return <button onClick={() => trackEvent('button-click')}>Click me</button>
}

That's it! Pageviews are tracked automatically.

Platform Guides

#

• React — Basic React setup with hooks and components
• Next.js — App Router and Pages Router integration
• React Native — Mobile apps with offline queuing