Integration React React Router 7 Data

PostHogOfficialCreated by PostHog

Skill
Tool integration
Software development
MIT
No issues found

Download ZIP

From the author

PostHog integration for React Router v7 - Data mode applications

— the description by PostHog

AutoGineer summary

Written by AutoGineer from the skill’s own files, not by the author

This skill provides a systematic workflow for adding PostHog analytics to React Router v7 applications using Data mode. It covers the full lifecycle of integration, including client-side initialization, user identification, event tracking, and error handling. The guide emphasizes maintaining clean code by using environment variables for configuration, avoiding unnecessary useEffect hooks for event logic, and following established patterns for feature flags and exception capture.

What it does

Provides a step-by-step workflow for PostHog integration.
Demonstrates client-side initialization using PostHogProvider.
Outlines patterns for user identification during login flows.
Shows how to implement manual event tracking for user actions.
Details error tracking using error boundaries and manual capture.
Provides best practices for feature flag usage and state management.

When to use it

When you need to add product analytics to a React Router v7 Data mode project.
When you want to implement session replay and error tracking in your React application.
When you need to identify users and track specific business events.
When you are looking for standardized patterns for feature flag implementation.

Advantages

Follows a structured, multi-step integration process.
Promotes clean code by discouraging misuse of useEffect.
Includes clear patterns for both client-side and server-side event correlation.
Provides a reference example project for implementation guidance.

Usage examples

“How do I initialize PostHog in my React Router 7 app?”: The skill directs you to wrap your application in the PostHogProvider and initialize the client in your entry point using environment variables.
“Where should I place my event tracking logic?”: The skill advises placing capture calls directly within event handlers rather than using useEffect hooks.

Install

Download the skill as a ZIP:
https://mp-staging.autogineer.com/agent-skills/posthog/integration-react-react-router-7-data/download

Unzip it into the cross-client skills folder of your project:

mkdir -p .agents/skills && unzip integration-react-react-router-7-data.zip -d .agents/skills

Documentation by PostHog

PostHog integration for React Router v7 - Data mode

This skill helps you add PostHog analytics to React Router v7 - Data mode applications.

Workflow

Follow these steps in order to complete the integration:

basic-integration-1.0-begin.md - PostHog Setup - Begin ← Start here
basic-integration-1.1-edit.md - PostHog Setup - Edit
basic-integration-1.2-revise.md - PostHog Setup - Revise
basic-integration-1.3-conclude.md - PostHog Setup - Conclusion

Reference files

references/EXAMPLE.md - React Router v7 - Data mode example project code
references/react-router-v7-data-mode.md - React router v7 data mode - docs
references/identify-users.md - Identify users - docs
references/basic-integration-1.0-begin.md - PostHog setup - begin
references/basic-integration-1.1-edit.md - PostHog setup - edit
references/basic-integration-1.2-revise.md - PostHog setup - revise
references/basic-integration-1.3-conclude.md - PostHog setup - conclusion

The example project shows the target implementation pattern. Consult the documentation for API details.

Key principles

Environment variables: Always use environment variables for PostHog keys. Never hardcode them.
Minimal changes: Add PostHog code alongside existing integrations. Don't replace or restructure existing code.
Match the example: Your implementation should follow the example project's patterns as closely as possible.

Framework guidelines

For feature flags, use useFeatureFlagEnabled() or useFeatureFlagPayload() hooks - they handle loading states and external sync automatically
Add analytics capture in event handlers where user actions occur, NOT in useEffect reacting to state changes
Do NOT use useEffect for data transformation - calculate derived values during render instead
Do NOT use useEffect to respond to user events - put that logic in the event handler itself
Do NOT use useEffect to chain state updates - calculate all related updates together in the event handler
Do NOT use useEffect to notify parent components - call the parent callback alongside setState in the event handler
To reset component state when a prop changes, pass the prop as the component's key instead of using useEffect
useEffect is ONLY for synchronizing with external systems (non-React widgets, browser APIs, network subscriptions)

Identifying users

Identify users during login and signup events. Refer to the example code and documentation for the correct identify pattern for this framework. If both frontend and backend code exist, pass the client-side session and distinct ID using X-POSTHOG-DISTINCT-ID and X-POSTHOG-SESSION-ID headers to maintain correlation.

Error tracking

Add PostHog error tracking to relevant files, particularly around critical user flows and API boundaries.

Files

ATTRIBUTION.mdAdded by AutoGineer1011 B
LICENSELicence file added by AutoGineer1.0 KiB
SKILL.md3.0 KiB
references/EXAMPLE.md20.1 KiB
references/basic-integration-1.0-begin.md2.1 KiB
references/basic-integration-1.1-edit.md2.5 KiB
references/basic-integration-1.2-revise.md937 B
references/basic-integration-1.3-conclude.md1.6 KiB
references/identify-users.md8.1 KiB
references/react-router-v7-data-mode.md11.4 KiB

references/EXAMPLE.md

PostHog React Router v7 - Data mode Example Project

Repository: https://github.com/PostHog/context-mill Path: basics/react-react-router-7-data

README.md

PostHog React Router 7 Data Mode example

This is a React Router 7 Data Mode example demonstrating PostHog integration with product analytics, session replay, feature flags, and error tracking.

Features

Product Analytics: Track user events and behaviors
Session Replay: Record and replay user sessions
Error Tracking: Capture and track errors
User Authentication: Demo login system with PostHog user identification
Client-side Tracking: Examples of client-side tracking methods
Data Mode: React Router 7 data mode with client-side routing

Getting Started

1. Install Dependencies

npm install
# or
pnpm install

2. Configure Environment Variables

Create a .env file in the root directory:

VITE_PUBLIC_POSTHOG_PROJECT_TOKEN=your_posthog_project_token
VITE_PUBLIC_POSTHOG_HOST=https://us.i.posthog.com

Get your PostHog project token from your PostHog project settings.

3. Run the Development Server

npm run dev
# or
pnpm dev

Open http://localhost:5173 with your browser to see the app.

Project Structure

app/
├── components/
│   └── Header.tsx           # Navigation header with auth state
├── contexts/
│   └── AuthContext.tsx      # Authentication context with PostHog integration
├── routes/
│   ├── home.tsx             # Home/Login page
│   ├── burrito.tsx          # Demo feature page with event tracking
│   └── profile.tsx          # User profile with error tracking demo
├── root.tsx                 # Root route with error boundary
└── routes.tsx               # Route configuration

index.tsx                    # App entry point with PostHog initialization

Key Integration Points

Client-side initialization (index.tsx)

import posthog from 'posthog-js';
import { PostHogProvider } from '@posthog/react'

posthog.init(import.meta.env.VITE_PUBLIC_POSTHOG_PROJECT_TOKEN, {
  api_host: import.meta.env.VITE_PUBLIC_POSTHOG_HOST,
  defaults: '2026-01-30',
});

<PostHogProvider client={posthog}>
  <RouterProvider router={router} />
</PostHogProvider>

User identification (AuthContext.tsx)

The user is identified when the user logs in on the client-side.

posthog.identify(username);
posthog.capture('user_logged_in');

The session and distinct ID can be passed to the backend by including the X-POSTHOG-SESSION-ID and X-POSTHOG-DISTINCT-ID headers.

You should use these headers in the backend to identify events.

Important: do not identify users on the server-side.

Event tracking (burrito.tsx)

posthog?.capture('burrito_considered', {
  total_considerations: updatedUser.burritoConsiderations,
  username: user.username,
});

Error tracking (root.tsx, profile.tsx)

Errors are captured in two ways:

Error boundary - The RootErrorBoundary in root.tsx automatically captures unhandled React Router errors:

export function RootErrorBoundary() {
  const error = useRouteError();
  const posthog = usePostHog();
  if (error) {
    posthog.captureException(error);
  }
  // ... error UI
}

Manual error capture in components (profile.tsx):

posthog?.captureException(err);

Learn More

.env.example

VITE_PUBLIC_POSTHOG_PROJECT_TOKEN=
VITE_PUBLIC_POSTHOG_HOST=
PROJECT_ID=

.react-router/types/+future.ts

// Generated by React Router

import "react-router";

declare module "react-router" {
  interface Future {
    v8_middleware: false
  }
}

.react-router/types/+routes.ts

// Generated by React Router

import "react-router"

declare module "react-router" {
  interface Register {
    pages: Pages
    routeFiles: RouteFiles
    routeModules: RouteModules
  }
}

type Pages = {
  "/": {
    params: {};
  };
};

type RouteFiles = {
  "root.tsx": {
    id: "root";
    page: "/";
  };
  "routes/home.tsx": {
    id: "routes/home";
    page: "/";
  };
};

type RouteModules = {
  "root": typeof import("./app/root.tsx");
  "routes/home": typeof import("./app/routes/home.tsx");
};

.react-router/types/app/+types/root.ts

// Generated by React Router

import type { GetInfo, GetAnnotations } from "react-router/internal";

type Module = typeof import("../root.js")

type Info = GetInfo<{
  file: "root.tsx",
  module: Module
}>

type Matches = [{
  id: "root";
  module: typeof import("../root.js");
}];

type Annotations = GetAnnotations<Info & { module: Module, matches: Matches }, false>;

export namespace Route {
  // links
  export type LinkDescriptors = Annotations["LinkDescriptors"];
  export type LinksFunction = Annotations["LinksFunction"];

  // meta
  export type MetaArgs = Annotations["MetaArgs"];
  export type MetaDescriptors = Annotations["MetaDescriptors"];
  export type MetaFunction = Annotations["MetaFunction"];

  // headers
  export type HeadersArgs = Annotations["HeadersArgs"];
  export type HeadersFunction = Annotations["HeadersFunction"];

  // middleware
  export type MiddlewareFunction = Annotations["MiddlewareFunction"];

  // clientMiddleware
  export type ClientMiddlewareFunction = Annotations["ClientMiddlewareFunction"];

  // loader
  export type LoaderArgs = Annotations["LoaderArgs"];

  // clientLoader
  export type ClientLoaderArgs = Annotations["ClientLoaderArgs"];

  // action
  export type ActionArgs = Annotations["ActionArgs"];

  // clientAction
  export type ClientActionArgs = Annotations["ClientActionArgs"];

  // HydrateFallback
  export type HydrateFallbackProps = Annotations["HydrateFallbackProps"];

  // Component
  export type ComponentProps = Annotations["ComponentProps"];

  // ErrorBoundary
  export type ErrorBoundaryProps = Annotations["ErrorBoundaryProps"];
}

.react-router/types/app/routes/+types/home.ts

// Generated by React Router

import type { GetInfo, GetAnnotations } from "react-router/internal";

type Module = typeof import("../home.js")

type Info = GetInfo<{
  file: "routes/home.tsx",
  module: Module
}>

type Matches = [{
  id: "root";
  module: typeof import("../../root.js");
}, {
  id: "routes/home";
  module: typeof import("../home.js");
}];

type Annotations = GetAnnotations<Info & { module: Module, matches: Matches }, false>;

export namespace Route {
  // links
  export type LinkDescriptors = Annotations["LinkDescriptors"];
  export type LinksFunction = Annotations["LinksFunction"];

  // meta
  export type MetaArgs = Annotations["MetaArgs"];
  export type MetaDescriptors = Annotations["MetaDescriptors"];
  export type MetaFunction = Annotations["MetaFunction"];

  // headers
  export type HeadersArgs = Annotations["HeadersArgs"];
  export type HeadersFunction = Annotations["HeadersFunction"];

  // middleware
  export type MiddlewareFunction = Annotations["MiddlewareFunction"];

  // clientMiddleware
  export type ClientMiddlewareFunction = Annotations["ClientMiddlewareFunction"];

  // loader
  export type LoaderArgs = Annotations["LoaderArgs"];

  // clientLoader
  export type ClientLoaderArgs = Annotations["ClientLoaderArgs"];

  // action
  export type ActionArgs = Annotations["ActionArgs"];

  // clientAction
  export type ClientActionArgs = Annotations["ClientActionArgs"];

  // HydrateFallback
  export type HydrateFallbackProps = Annotations["HydrateFallbackProps"];

  // Component
  export type ComponentProps = Annotations["ComponentProps"];

  // ErrorBoundary
  export type ErrorBoundaryProps = Annotations["ErrorBoundaryProps"];
}

app/components/Header.tsx

import { Link } from 'react-router';
import { useAuth } from '../contexts/AuthContext';
import { usePostHog } from '@posthog/react';

export default function Header() {
  const { user, logout } = useAuth();
  const posthog = usePostHog();

  const handleLogout = () => {
    posthog?.capture('user_logged_out');
    posthog?.reset();
    logout();
  };

  return (
    <header className="header">
      <div className="header-container">
        <nav>
          <Link to="/">Home</Link>
          {user && (
            <>
              <Link to="/burrito">Burrito Consideration</Link>
              <Link to="/profile">Profile</Link>
            </>
          )}
        </nav>
        <div className="user-section">
          {user ? (
            <>
              <span>Welcome, {user.username}!</span>
              <button onClick={handleLogout} className="btn-logout">
                Logout
              </button>
            </>
          ) : (
            <span>Not logged in</span>
          )}
        </div>
      </div>
    </header>
  );
}

app/contexts/AuthContext.tsx

import { usePostHog } from '@posthog/react';
import { createContext, useContext, useState, type ReactNode } from 'react';

interface User {
  username: string;
  burritoConsiderations: number;
}

interface AuthContextType {
  user: User | null;
  login: (username: string, password: string) => Promise<boolean>;
  logout: () => void;
  setUser: (user: User) => void;
}

const AuthContext = createContext<AuthContextType | undefined>(undefined);

const users: Map<string, User> = new Map();

export function AuthProvider({ children }: { children: ReactNode }) {
  const posthog = usePostHog();
  const [user, setUser] = useState<User | null>(() => {
    if (typeof window === 'undefined') return null;

    const storedUsername = localStorage.getItem('currentUser');
    if (storedUsername) {
      const existingUser = users.get(storedUsername);
      if (existingUser) {
        return existingUser;
      }
    }
    return null;
  });

  const login = async (username: string, password: string): Promise<boolean> => {
    // Client-side only fake auth - no server calls
    if (!username || !password) {
      return false;
    }

    let localUser = users.get(username);
    if (!localUser) {
      localUser = { 
        username, 
        burritoConsiderations: 0 
      };
      users.set(username, localUser);
    }

    setUser(localUser);
    localStorage.setItem('currentUser', username);
    
    // Identifying the user once on login/sign up is enough.
    posthog.identify(username);
    posthog.capture('user_logged_in');

    return true;
  };

  const logout = () => {
    setUser(null);
    localStorage.removeItem('currentUser');
  };

  const setUserState = (newUser: User) => {
    setUser(newUser);
    users.set(newUser.username, newUser);
  };

  return (
    <AuthContext.Provider value={{ user, login, logout, setUser: setUserState }}>
      {children}
    </AuthContext.Provider>
  );
}

export function useAuth() {
  const context = useContext(AuthContext);
  if (context === undefined) {
    throw new Error('useAuth must be used within an AuthProvider');
  }
  return context;
}

app/root.tsx

import { Outlet, useRouteError, isRouteErrorResponse } from "react-router";
import Header from "./components/Header";
import { AuthProvider } from "./contexts/AuthContext";
import "./globals.css";
import { usePostHog } from "@posthog/react";

export default function Root() {
  return (
      <AuthProvider>
        <Header />
        <main>
          <Outlet />
        </main>
      </AuthProvider>
  );
}

export function RootErrorBoundary() {
  const error = useRouteError();
  
  const posthog = usePostHog();
  if (error) {
    posthog.captureException(error);
  }

  if (isRouteErrorResponse(error)) {
    return (
      <>
        <h1>
          {error.status} {error.statusText}
        </h1>
        <p>{error.data}</p>
      </>
    );
  } else if (error instanceof Error) {
    return (
      <div>
        <h1>Error</h1>
        <p>{error.message}</p>
        <p>The stack trace is:</p>
        <pre>{error.stack}</pre>
      </div>
    );
  } else {
    return <h1>Unknown Error</h1>;
  }
}

app/routes.tsx

import React from "react";
import type { RouteObject } from "react-router";
import Root, { RootErrorBoundary } from "./root";
import Home from "./routes/home";
import Burrito from "./routes/burrito";
import Profile from "./routes/profile";

export const routes: RouteObject[] = [
  {
    path: "/",
    element: <Root />,
    ErrorBoundary: RootErrorBoundary,
    children: [
      {
        index: true,
        element: <Home />,
      },
      {
        path: "burrito",
        element: <Burrito />,
      },
      {
        path: "profile",
        element: <Profile />,
      },
    ],
  },
];

app/routes/burrito.tsx

import { useState, useEffect } from 'react';
import { useNavigate } from 'react-router';
import { useAuth } from '../contexts/AuthContext';
import { usePostHog } from '@posthog/react';

export default function BurritoPage() {
  const { user, setUser } = useAuth();
  const navigate = useNavigate();
  const posthog = usePostHog();
  const [hasConsidered, setHasConsidered] = useState(false);

  useEffect(() => {
    if (!user) {
      navigate('/');
    }
  }, [user, navigate]);

  if (!user) {
    return null;
  }

  const handleConsideration = () => {
    // Client-side only - no server calls
    const updatedUser = {
      ...user,
      burritoConsiderations: user.burritoConsiderations + 1
    };
    setUser(updatedUser);
    setHasConsidered(true);
    setTimeout(() => setHasConsidered(false), 2000);
    
    // Capture burrito consideration event
    posthog?.capture('burrito_considered', {
      total_considerations: updatedUser.burritoConsiderations,
      username: user.username,
    });
  };

  return (
    <div className="container">
      <h1>Burrito consideration zone</h1>
      <p>Take a moment to truly consider the potential of burritos.</p>

      <div style={{ textAlign: 'center' }}>
        <button
          onClick={handleConsideration}
          className="btn-burrito"
        >
          I have considered the burrito potential
        </button>

        {hasConsidered && (
          <p className="success">
            Thank you for your consideration! Count: {user.burritoConsiderations}
          </p>
        )}
      </div>

      <div className="stats">
        <h3>Consideration stats</h3>
        <p>Total considerations: {user.burritoConsiderations}</p>
      </div>
    </div>
  );
}

app/routes/home.tsx

import { useState } from 'react';
import { useAuth } from '../contexts/AuthContext';

export default function Home() {
  const { user, login } = useAuth();
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
  const [error, setError] = useState('');

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setError('');

    const success = await login(username, password);
    if (success) {
      setUsername('');
      setPassword('');
    } else {
      setError('Please provide both username and password');
    }
  };

  if (user) {
    return (
      <div className="container">
        <h1>Welcome back, {user.username}!</h1>
        <p>You are now logged in. Feel free to explore:</p>
        <ul>
          <li>Consider the potential of burritos</li>
          <li>View your profile and statistics</li>
        </ul>
      </div>
    );
  }

  return (
    <div className="container">
      <h1>Welcome to Burrito Consideration App</h1>
      <p>Please sign in to begin your burrito journey</p>

      <form onSubmit={handleSubmit} className="form">
        <div className="form-group">
          <label htmlFor="username">Username:</label>
          <input
            type="text"
            id="username"
            value={username}
            onChange={(e) => setUsername(e.target.value)}
            placeholder="Enter any username"
          />
        </div>

        <div className="form-group">
          <label htmlFor="password">Password:</label>
          <input
            type="password"
            id="password"
            value={password}
            onChange={(e) => setPassword(e.target.value)}
            placeholder="Enter any password"
          />
        </div>

        {error && <p className="error">{error}</p>}

        <button type="submit" className="btn-primary">Sign In</button>
      </form>

      <p className="note">
        Note: This is a demo app. Use any username and password to sign in.
      </p>
    </div>
  );
}

app/routes/profile.tsx

import { useEffect } from 'react';
import { useNavigate } from 'react-router';
import { useAuth } from '../contexts/AuthContext';
import { usePostHog } from '@posthog/react';

export default function ProfilePage() {
  const { user } = useAuth();
  const navigate = useNavigate();
  const posthog = usePostHog();

  useEffect(() => {
    if (!user) {
      navigate('/');
    }
  }, [user, navigate]);

  if (!user) {
    return null;
  }

  const triggerTestError = () => {
    try {
      throw new Error('Test error for PostHog error tracking');
    } catch (err) {
      posthog?.captureException(err);
      console.error('Captured error:', err);
      alert('Error captured and sent to PostHog!');
    }
  };

  return (
    <div className="container">
      <h1>User Profile</h1>

      <div className="stats">
        <h2>Your Information</h2>
        <p><strong>Username:</strong> {user.username}</p>
        <p><strong>Burrito Considerations:</strong> {user.burritoConsiderations}</p>
      </div>

      <div style={{ marginTop: '2rem' }}>
        <button onClick={triggerTestError} className="btn-primary" style={{ backgroundColor: '#dc3545' }}>
          Trigger Test Error (for PostHog)
        </button>
      </div>

      <div style={{ marginTop: '2rem' }}>
        <h3>Your Burrito Journey</h3>
        {user.burritoConsiderations === 0 ? (
          <p>You haven&apos;t considered any burritos yet. Visit the Burrito Consideration page to start!</p>
        ) : user.burritoConsiderations === 1 ? (
          <p>You&apos;ve considered the burrito potential once. Keep going!</p>
        ) : user.burritoConsiderations < 5 ? (
          <p>You&apos;re getting the hang of burrito consideration!</p>
        ) : user.burritoConsiderations < 10 ? (
          <p>You&apos;re becoming a burrito consideration expert!</p>
        ) : (
          <p>You are a true burrito consideration master! 🌯</p>
        )}
      </div>
    </div>
  );
}

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>React Router 7 Data Mode</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/index.tsx"></script>
  </body>
</html>

index.tsx

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import { createBrowserRouter, RouterProvider } from "react-router";
import Root, { RootErrorBoundary } from "./app/root";
import Home from "./app/routes/home";
import Burrito from "./app/routes/burrito";
import Profile from "./app/routes/profile";

import posthog from 'posthog-js';
import { PostHogProvider } from '@posthog/react'

posthog.init(import.meta.env.VITE_PUBLIC_POSTHOG_PROJECT_TOKEN, {
  api_host: import.meta.env.VITE_PUBLIC_POSTHOG_HOST,
  defaults: '2026-01-30',
});

const router = createBrowserRouter([
  {
    path: "/",
    Component: Root,
    ErrorBoundary: RootErrorBoundary,
    children: [
      {
        index: true,
        Component: Home,
      },
      {
        path: "burrito",
        Component: Burrito,
      },
      {
        path: "profile",
        Component: Profile,
      },
    ],
  },
]);

createRoot(document.getElementById("root")!).render(
  <StrictMode>
    <PostHogProvider client={posthog}>
      <RouterProvider router={router} />
    </PostHogProvider>
  </StrictMode>
);

vite.config.ts

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import tsconfigPaths from "vite-tsconfig-paths";

export default defineConfig({
  plugins: [react(), tsconfigPaths()],
});

Requirements and compatibility

Works with: Claude Code, Claude apps, OpenAI Codex, GitHub Copilot, Cursor, Gemini CLI, Kiro, OpenCode, Goose, Amp, Roo Code, JetBrains Junie, Factory Droid, Devin (ex-Windsurf), Mistral Vibe, OpenHands, Letta

“Works with” means the tool reads the open Agent Skills format; a skill written for one tool may use features others lack.

Security

No issues found by our static scan· No issues found

A static scan is not a guarantee. Skills are third-party content: review a skill before you let an agent use it.

Attribution and licence

Created by

PostHog

Publisher

PostHog (Official)

Source

PostHog/skills · skills/posthog/integration/skills/react-react-router-7-data · commit a5d30e7

Licence

MIT License (redistribution allowed)

LICENSE (added by AutoGineer from LICENSE)
ATTRIBUTION.md (written by AutoGineer)

Synced

2026-11-08

Also distributed in

PostHog/skills

AutoGineer is not affiliated with or endorsed by PostHog.

Download ZIP

The ZIP holds the skill’s files, its licence files and an ATTRIBUTION.md. Download integration-react-react-router-7-data.zip

From the author

AutoGineer summary

What it does

When to use it

Advantages

Usage examples

Install

Documentation by PostHog

PostHog integration for React Router v7 - Data mode

Workflow

Reference files

Key principles

Framework guidelines

Identifying users

Error tracking

Files

references/EXAMPLE.md

PostHog React Router v7 - Data mode Example Project

README.md

PostHog React Router 7 Data Mode example

Features

Getting Started

1. Install Dependencies

2. Configure Environment Variables

3. Run the Development Server

Project Structure

Key Integration Points

Client-side initialization (index.tsx)

User identification (AuthContext.tsx)

Event tracking (burrito.tsx)

Error tracking (root.tsx, profile.tsx)

Learn More

.env.example

.react-router/types/+future.ts

.react-router/types/+routes.ts

.react-router/types/app/+types/root.ts

.react-router/types/app/routes/+types/home.ts

app/components/Header.tsx

app/contexts/AuthContext.tsx

app/root.tsx

app/routes.tsx

app/routes/burrito.tsx

app/routes/home.tsx

app/routes/profile.tsx

index.html

index.tsx

vite.config.ts

Requirements and compatibility

Security

Attribution and licence

Related skills

Web Artifacts Builder

Frontend UI Engineering

Ask Sonner

Pick UI Library

Animate Expo

Prototype

Download ZIP