React product analytics installation

  1. Install the package

    Required

    Install the PostHog JavaScript library using your package manager:

    npm install posthog-js

  2. Add environment variables

    Required

    Add your PostHog API key and host to your environment variables. For Vite-based React apps, use the VITE_PUBLIC_ prefix:

    .env
    VITE_PUBLIC_POSTHOG_KEY=<ph_project_api_key>
    VITE_PUBLIC_POSTHOG_HOST=https://us.i.posthog.com

  3. Initialize PostHog

    Required

    Wrap your app with the PostHogProvider component at the root of your application (such as main.tsx if you're using Vite):

    main.tsx
    import { StrictMode } from 'react'
    import { createRoot } from 'react-dom/client'
    import './index.css'
    import App from './App.jsx'
    import { PostHogProvider } from 'posthog-js/react'
    

    const options = {
      api_host: import.meta.env.VITE_PUBLIC_POSTHOG_HOST,
      defaults: '2025-11-30',
    } as const
    

    createRoot(document.getElementById('root')).render(
      <StrictMode>
        <PostHogProvider apiKey={import.meta.env.VITE_PUBLIC_POSTHOG_KEY} options={options}>
          <App />
        </PostHogProvider>
      </StrictMode>
    )
    defaults option

    The defaults option automatically configures PostHog with recommended settings for new projects. See SDK defaults for details.

  4. Send events

    Click around and view a couple pages to generate some events. PostHog automatically captures pageviews, clicks, and other interactions for you.

    If you'd like, you can also manually capture custom events:

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

    By default, for backwards compatibility reasons, events are sent with person profile processing enabled. This means a person profile will be created for each user who triggers an event.

    If you want to disable person profile processing for certain events, send the event with the following property:

    Javascript
    "$process_person_profile": false

Community questions

Was this page useful?

Questions about this page? or post a community question.