> ## 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) is an easy way to integrate Fingerprint into your React application. It supports all capabilities of the JavaScript agent and provides a built-in caching mechanism. You can view our [React quickstart](/docs/v3/react-quickstart) for a step-by-step guide to get started.

### How to install

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

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

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

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

Wrap your application (or component) in `FpjsProvider`. 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 {
  FpjsProvider,
  FingerprintJSPro
} from '@fingerprintjs/fingerprintjs-pro-react'

createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <FpjsProvider
      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
        ],
        // region: "eu"
      }}
    >
      <App />
    </FpjsProvider>
  </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 '@fingerprintjs/fingerprintjs-pro-react'

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

  return (
    <div>
      <button onClick={() => getData({ignoreCache: true})}>
        Reload data
      </button>
      <p>VisitorId: {isLoading ? 'Loading...' : data?.visitorId}</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.