PostHog✦ Official

integration-react-tanstack-router-code-based

### PostHog Integration for TanStack Router

PostHog/skills|Updated Apr 10, 2026

Works with

Claude CodeCursorClineWindsurfCodex

What it does

Initialize PostHogProvider in the root route to ensure global access to the analytics client across all child routes.
Track pageviews using TanStack Router navigation events and capture user actions directly within event handlers, avoiding useEffect.
Identify users during authentication and maintain session correlation by passing distinct IDs via headers in API requests.

Repository

PostHog/skills

Last updated

Apr 10, 2026

Installation Guide

Select your AI agent

How to use integration-react-tanstack-router-code-based on Cursor

AI-first code editor with Composer

Prerequisites

Before installing skills in Cursor, ensure your development environment meets these requirements:

›Cursor installed and configured on your machine
›Node.js 16+ with npm — verify with node --version
›Active project directory where you want to add integration-react-tanstack-router-code-based

Run the install command

Execute the skills CLI command in your project's root directory to begin installation:

$npx skills add https://github.com/PostHog/skills --skill integration-react-tanstack-router-code-based

Fetches integration-react-tanstack-router-code-based from PostHog/skills and configures it for Cursor.

Select Cursor when prompted

The CLI shows a list of agents. Use arrow keys and space to select Cursor:

◆ Which agents do you want to install to?

│

│ ── Universal (.agents/skills) ────────────────

│ · Cline · Codex · Goose · Windsurf

│ ●Cursor(selected)

│ · Cursor · Aider · Continue

Verify installation

Confirm successful installation by checking the skill directory location:

.cursor/skills/integration-react-tanstack-router-code-based

Restart Cursor to activate integration-react-tanstack-router-code-based. Access via /integration-react-tanstack-router-code-based in your agent's command palette.

⚠

Security Notice

We perform automated surface-level scans (Gen AI Scanner, Socket, Snyk) during installation. These checks detect common vulnerabilities but do not guarantee complete security. Always review skill source code and verify the publisher's reputation before production use.

Skills execute code in your environment. Always review source, verify the publisher, and test in isolation before production.

›View source on GitHub ›Skills CLI docs ›About Cursor ›What are agent skills?

Documentation

List & Monetize Your Skill

Submit your Claude Code skill and start earning

Get started →

Use Cases

Task Automation & Efficiency

Automate repetitive workflows and reduce manual effort

Example

Generate reports, summarize documents, draft communications

✓

Save 3-5 hours per week on routine tasks

Knowledge Enhancement

Learn new skills, understand complex topics, get expert guidance

Example

Explain concepts, provide examples, suggest learning resources

✓

Accelerate learning and skill development by 2x

Quality Improvement

Enhance output quality through reviews, suggestions, and refinements

Example

Review drafts, suggest improvements, catch errors

✓

Improve work quality by 30-40% with less effort

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 with TanStack Router (code-based) example project code

references/tanstack-start.md - Tanstack start - 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)

Use TanStack Router's built-in navigation events for pageview tracking instead of useEffect

Use PostHogProvider in the root component defined in either the file-based convention (__root.tsx) or code-based convention (wherever createRootRoute() is called) so all child routes have access to the PostHog client

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.

name	integration-react-tanstack-router-code-based
description	>- PostHog integration for React applications using TanStack Router with code-based routing
metadata	author: PostHog version: 1.9.4

integration-react-tanstack-router-code-based

What it does

Category

Repository

Last updated

Installation Guide

How to use integration-react-tanstack-router-code-based on Cursor

Prerequisites

Run the install command

Select Cursor when prompted

Verify installation

Security Notice

Documentation

List & Monetize Your Skill

Use Cases

Task Automation & Efficiency

Knowledge Enhancement

Quality Improvement

Install Skill

PostHog integration for React with TanStack Router (code-based)

Workflow

Reference files

Key principles

Framework guidelines

Identifying users

Error tracking

Implementation Guide

Best Practices

When to Use This

Learning Path

Related Skills

integration-tanstack-start

integration-react-native

feature-flags-react

integration-astro-view-transitions

integration-angular

feature-flags-react-native

Reviews

Discussion