# React experiments 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

    ## Implement your experiment

    Required

    Experiments run on top of our feature flags. You can define which version of your code runs based on the return value of the feature flag.

    You can use the `useFeatureFlagVariantKey` hook or the `PostHogFeature` component:

    ```jsx
    // You can either use the useFeatureFlagVariantKey hook,
    // or you can use the feature flags component - https://posthog.com/docs/libraries/react#feature-flags-react-component
    // Method one: using the useFeatureFlagVariantKey hook
    import { useFeatureFlagVariantKey } from 'posthog-js/react'
    function App() {
        const variant = useFeatureFlagVariantKey('your-experiment-feature-flag')
        if (variant === 'test') {
            // do something
        }
    }
    // Method two: using the feature flags component
    import { PostHogFeature } from 'posthog-js/react'
    function App() {
        return (
            <PostHogFeature flag='your-experiment-feature-flag' match='test'>
                <div>
                    {/* the component to show */}
                </div>
            </PostHogFeature>
        )
    }
    // You can also test your code by overriding the feature flag:
    posthog.featureFlags.overrideFeatureFlags({ flags: {'your-experiment-feature-flag': 'test'} })
    ```

6.  6

    ## Run your experiment

    Required

    Once you've implemented the feature flag in your code, you'll enable it for a target audience by creating a new experiment in the PostHog dashboard.

7.  7

    ## Next steps

    Recommended

    Now that you're running experiments, continue with the resources below to learn what else Experiments enables within the PostHog platform.

    | Resource | Description |
    | --- | --- |
    | [Creating an experiment](/docs/experiments/creating-an-experiment.md) | How to create an experiment in PostHog |
    | [Adding experiment code](/docs/experiments/adding-experiment-code.md) | How to implement experiments for all platforms |
    | [Statistical significance](/docs/experiments/statistics-bayesian.md) | Understanding when results are meaningful |
    | [Experiment insights](/docs/experiments/analyzing-results.md) | How to analyze your experiment data |
    | [More tutorials](/docs/experiments/tutorials.md) | Other real-world examples and use cases |

### Community questions

Ask a question

### Was this page useful?

HelpfulCould be better