React

VITE_PUBLIC_POSTHOG_PROJECT_TOKEN=<ph_project_token>
VITE_PUBLIC_POSTHOG_HOST=https://us.i.posthog.com

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'
import App from './App.jsx'
import { PostHogProvider } from '@posthog/react'
const options = {
  api_host: import.meta.env.VITE_PUBLIC_POSTHOG_HOST,
  defaults: '2026-01-30',
} as const
createRoot(document.getElementById('root')).render(
  <StrictMode>
    <PostHogProvider apiKey={import.meta.env.VITE_PUBLIC_POSTHOG_PROJECT_TOKEN} options={options}>
      <App />
    </PostHogProvider>
  </StrictMode>
)

import { usePostHog } from '@posthog/react'
function MyComponent() {
    const posthog = usePostHog()
    function handleClick() {
        posthog.capture('button_clicked', { button_name: 'signup' })
    }
    return <button onClick={handleClick}>Sign up</button>
}

import posthog from 'posthog-js'
export function trackPurchase(amount: number) {
    posthog.capture('purchase_completed', { amount })
}

posthog.capture('my_custom_event', { property: 'value' })

import { useFeatureFlagEnabled } from '@posthog/react'
function App() {
    const showWelcomeMessage = useFeatureFlagEnabled('flag-key')
    const payload = useFeatureFlagPayload('flag-key')
    return (
        <div className="App">
            {showWelcomeMessage ? (
                <div>
                    <h1>Welcome!</h1>
                    <p>Thanks for trying out our feature flags.</p>
                </div>
            ) : (
                <div>
                    <h2>No welcome message</h2>
                    <p>Because the feature flag evaluated to false.</p>
                </div>
            )}
        </div>
    )
}

import { useFeatureFlagVariantKey } from '@posthog/react'
function App() {
    const variantKey = useFeatureFlagVariantKey('show-welcome-message')
    let welcomeMessage = ''
    if (variantKey === 'variant-a') {
        welcomeMessage = 'Welcome to the Alpha!'

import { useFeatureFlagPayload, useFeatureFlagEnabled } from '@posthog/react'
function App() {
    const variant = useFeatureFlagEnabled('show-welcome-message')
    const payload = useFeatureFlagPayload('show-welcome-message')
    return (
        <>
            {variant ? (

import { PostHogFeature } from '@posthog/react'
function App() {
    return (
        <PostHogFeature flag='show-welcome-message' match={true}>
            <div>
                <h1>Hello</h1>
                <p>Thanks for trying out our feature flags.</p>
            </

<PostHogFeature flag='show-welcome-message' match={true}>
    {(payload) => {
        return (
            <div>
                <h1>{payload.welcomeMessage}</h1>
                <p>Thanks for trying out our feature flags.</p>