# React session replay 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

    ## Watch session recordings

    Recommended

    Visit your site or app and interact with it for at least 10 seconds to generate a recording. Navigate between pages, click buttons, and fill out forms to capture meaningful interactions.

    [Watch your first recording →](/replay/home.md)

6.  6

    ## Next steps

    Recommended

    Now that you're recording sessions, continue with the resources below to learn what else Session Replay enables within the PostHog platform.

    | Resource | Description |
    | --- | --- |
    | [Watching recordings](/docs/session-replay/how-to-watch-recordings.md) | How to find and watch session recordings |
    | [Privacy controls](/docs/session-replay/privacy.md) | How to mask sensitive data in recordings |
    | [Network recording](/docs/session-replay/network-recording.md) | How to capture network requests in recordings |
    | [Console log recording](/docs/session-replay/console-log-recording.md) | How to capture console logs in recordings |
    | [More tutorials](/docs/session-replay/tutorials.md) | Other real-world examples and use cases |

### Community questions

Ask a question

### Was this page useful?

HelpfulCould be better