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

# React

The [Fingerprint React SDK](https://github.com/fingerprintjs/react) integrates Fingerprint into React applications. It supports all capabilities of the JavaScript agent including a built-in [caching mechanism](/reference/js-agent-v4-start-function#cache). See the [React quickstart](/docs/react-quickstart) for a step-by-step guide to get started.

### How to install

Add `@fingerprint/react` as a dependency to your application via npm or yarn.

<CodeGroup>
  ```shell NPM theme={"theme":"github-dark-dimmed"}
  npm install @fingerprint/react
  ```

  ```shell Yarn theme={"theme":"github-dark-dimmed"}
  yarn add @fingerprint/react
  ```

  ```shell PNPM theme={"theme":"github-dark-dimmed"}
  pnpm add @fingerprint/react
  ```
</CodeGroup>

Wrap your application (or component) in `FingerprintProvider`. You need to specify your public API key and other configuration options based on your chosen region and active integration.

```javascript JavaScript theme={"theme":"github-dark-dimmed"}
// src/index.jsx
import React from 'react';
import { createRoot } from 'react-dom/client';
import App from './App';
import { FingerprintProvider } from '@fingerprint/react';

createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <FingerprintProvider
      apiKey="PUBLIC_API_KEY"
      endpoints="https://metrics.yourwebsite.com"
      region="us"
    >
      <App />
    </FingerprintProvider>
  </React.StrictMode>,
);
```

Use the `useVisitorData` hook in your components to identify visitors.

```javascript JavaScript theme={"theme":"github-dark-dimmed"}
// src/App.jsx
import { useVisitorData } from '@fingerprint/react';

export default function Home() {
  const { isLoading, error, data, getData } = useVisitorData({ immediate: true });

  return (
    <div>
      <button onClick={() => getData()}>Reload data</button>
      <p>Visitor ID: {isLoading ? 'Loading...' : data?.visitor_id}</p>
      <p>Full visitor data:</p>
      <pre>{error ? error.message : JSON.stringify(data, null, 2)}</pre>
    </div>
  );
}
```

### Documentation

You can find the full documentation in the official [GitHub repository](https://github.com/fingerprintjs/react). The repository also contains [an example app](https://github.com/fingerprintjs/react/tree/main/examples/create-react-app) demonstrating the usage of the library.

### Migration guide for React SDK v3.0.0

Version 3.0.0 of the React SDK switches from JavaScript agent v3 to [JavaScript agent v4](/reference/migrating-from-v3-to-v4).

1. Install a new version of the package:

<CodeGroup>
  ```bash NPM theme={"theme":"github-dark-dimmed"}
  npm install @fingerprint/react
  ```

  ```bash Yarn theme={"theme":"github-dark-dimmed"}
  yarn add @fingerprint/react
  ```

  ```bash PNPM theme={"theme":"github-dark-dimmed"}
  pnpm add @fingerprint/react
  ```
</CodeGroup>

2. Update your Fingerprint provider:

The default caching strategy has changed from `sessionStorage` caching to **no caching by default**, aligned with the underlying [JavaScript agent v4 default](/reference/js-agent-v4-start-function#cache). To preserve the previous behavior, explicitly configure caching in the provider (see example below).

```javascript Change provider imports and usage theme={"theme":"github-dark-dimmed"}
// [!code --]
import { FpjsProvider, FingerprintJSPro, CacheLocation } from '@fingerprintjs/fingerprintjs-pro-react'
import { FingerprintProvider } from '@fingerprint/react' // [!code ++]

<FpjsProvider // [!code --:15]
  cacheLocation={CacheLocation.LocalStorage}
  cacheTimeInSeconds={60}
  loadOptions={{
    apiKey: "PUBLIC_API_KEY",
    endpoint: [
      // "https://metrics.yourwebsite.com",
      FingerprintJSPro.defaultEndpoint
    ],
    scriptUrlPattern: [
      // "https://metrics.yourwebsite.com/web/v<version>/<apiKey>/loader_v<loaderVersion>.js",
      FingerprintJSPro.defaultScriptUrlPattern
    ],
  }}
>
// [!code ++:8]
<FingerprintProvider
  cache={{
    storage: "sessionStorage",
    duration: 3600
  }}
  apiKey="PUBLIC_API_KEY"
  endpoints="https://metrics.yourwebsite.com"
/>
```

3. Update `useVisitorData` calls:

```javascript Update parameters theme={"theme":"github-dark-dimmed"}
// [!code --]
import { useVisitorData } from '@fingerprintjs/fingerprintjs-pro-react';
// [!code ++]
import { useVisitorData } from '@fingerprint/react';

// [!code --:4]
const { data, getData } = useVisitorData(
  { timeout: 1000, ignoreCache: true },
  { immediate: false },
);

// [!code ++:3]
// `immediate` can now be configured in a first parameter
// `ignoreCache` parameter is no longer available, cache can be configured on the provider level instead
const { data, getData } = useVisitorData({ timeout: 1000, immediate: false });
```