Skip to main content
The Fingerprint React SDK is an easy way to integrate Fingerprint into your React application. It supports all capabilities of the JS agent and provides a built-in caching mechanism. You can view our 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. 
npm install @fingerprint/react
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
// src/index.jsx
import React from 'react'
import { createRoot } from 'react-dom/client'
import App from './App'
import {
  FingerprintProvider,
  FingerprintJSPro
} 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
// 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>VisitorId: {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. The repository also contains an example app demonstrating the usage of the library.

​
Migration guide for React SDK v3.0.0

  1. Install a new version of the package:
Using npm: 
npm install @fingerprint/react
Using yarn: 
yarn add @fingerprint/react
Using pnpm: 
pnpm add @fingerprint/react
  1. Update your Fingerprint provider:
Change provider imports and usage
import { FpjsProvider, FingerprintJSPro } from '@fingerprintjs/fingerprintjs-pro-react'
import { FingerprintProvider, Fingerprint } from '@fingerprint/react'

<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
    ],
  }}
>
<FingerprintProvider apiKey="<PUBLIC_API_KEY>" endpoints={["https://metrics.yourwebsite.com"]}>
  1. Update useVisitorData calls:
Update parameters
import { useVisitorData } from '@fingerprintjs/fingerprintjs-pro-react'
import { useVisitorData } from '@fingerprint/react'

const { data, getData } = useVisitorData({ timeout: 1000, ignoreCache: true }, { immediate: false }) 

// `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 })