> ## Documentation Index
> Fetch the complete documentation index at: https://docs.infinitewatch.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# React

> Add InfiniteWatch session replay to your React application

## Overview

The `@infinitewatch/react` SDK provides a React provider component that wraps your app and automatically handles session recording.

## Step 1: Installation

<CodeGroup>
  ```bash npm theme={null}
  npm install @infinitewatch/react
  ```

  ```bash pnpm theme={null}
  pnpm add @infinitewatch/react
  ```

  ```bash yarn theme={null}
  yarn add @infinitewatch/react
  ```
</CodeGroup>

## Step 2: Environment Variables

Create an environment file with your organization ID.

<Tabs>
  <Tab title="Vite">
    Add to your `.env` file:

    ```bash theme={null}
    VITE_INFINITEWATCH_ORG_ID=YOUR_ORGANIZATION_ID
    ```
  </Tab>

  <Tab title="Create React App">
    Add to your `.env` file:

    ```bash theme={null}
    REACT_APP_INFINITEWATCH_ORG_ID=YOUR_ORGANIZATION_ID
    ```
  </Tab>
</Tabs>

<Info>
  Replace `YOUR_ORGANIZATION_ID` with your actual organization ID. You can find this in your [InfiniteWatch dashboard](https://app.infinitewatch.ai/dashboard/settings).
</Info>

## Step 3: Basic Setup

Wrap your app with the `InfiniteWatchProvider` for automatic tracking.

<Tabs>
  <Tab title="Vite">
    ```tsx theme={null}
    import { InfiniteWatchProvider } from '@infinitewatch/react';

    function App() {
      return (
        <InfiniteWatchProvider
          organizationId={import.meta.env.VITE_INFINITEWATCH_ORG_ID}
        >
          {/* Your entire app goes here */}
          <YourApp />
        </InfiniteWatchProvider>
      );
    }

    export default App;
    ```
  </Tab>

  <Tab title="Create React App">
    ```tsx theme={null}
    import { InfiniteWatchProvider } from '@infinitewatch/react';

    function App() {
      return (
        <InfiniteWatchProvider
          organizationId={process.env.REACT_APP_INFINITEWATCH_ORG_ID}
        >
          {/* Your entire app goes here */}
          <YourApp />
        </InfiniteWatchProvider>
      );
    }

    export default App;
    ```
  </Tab>
</Tabs>

The provider should wrap your entire app so all pages are tracked.

## Identify Users

After the provider is set up, you can associate sessions with specific users:

```javascript theme={null}
InfiniteWatch.identify({
  external_id: 'user-12345',
  email: 'user@example.com',
  full_name: 'John Doe',
  metadata: {
    plan: 'premium',
    signup_date: '2024-01-15'
  }
});
```

<Note>
  Call `identify()` after the user logs in. The `external_id` is persisted in a cookie so it carries across page reloads and sessions.
</Note>