# React web analytics installation - Docs

1.  1

    ## Install the package

    Required

    Install [`posthog-js`](https://github.com/posthog/posthog-js) and `@posthog/react` using your package manager:

    PostHog AI

    ### npm

    ```bash
    npm install posthog-js @posthog/react
    ```

    ### yarn

    ```bash
    yarn add posthog-js @posthog/react
    ```

    ### pnpm

    ```bash
    pnpm add posthog-js @posthog/react
    ```

2.  2

    ## Add environment variables

    Required

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

    .env

    PostHog AI

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

3.  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

    PostHog AI

    ```jsx
    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>
    )
    ```

    **defaults option**

    The `defaults` option automatically configures PostHog with recommended settings for new projects. See [SDK defaults](/docs/libraries/js.md#sdk-defaults) for details.

4.  4

    ## Accessing PostHog in your code

    Recommended

    Use the `usePostHog` hook to access the PostHog instance in any component wrapped by `PostHogProvider`:

    MyComponent.tsx

    PostHog AI

    ```jsx
    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>
    }
    ```

    You can also import `posthog` directly for non-React code or utility functions:

    utils/analytics.ts

    PostHog AI

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

5.  5

    ## Send events

    Recommended

    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 AI

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

6.  6

    ## Next steps

    Recommended

    After installing PostHog and ensuring [autocapture](/docs/data/autocapture.md) is enabled, head to your [web analytics dashboard](/docs/web-analytics/dashboard.md) to see your data. And then check out our [getting started](/docs/web-analytics/getting-started.md) guide.

    > **PostHog tip:** Web analytics works with [anonymous events](/docs/data/anonymous-vs-identified-events.md). This means if you are primarily using PostHog for web analytics, it can be significantly cheaper for you.

### Community questions

Ask a question

### Was this page useful?

HelpfulCould be better