Skip to main content
The Fingerprint React SDK integrates Fingerprint into React applications. It supports all capabilities of the JavaScript agent including a built-in caching mechanism. See the 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 } 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>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. The repository also contains an example 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.
  1. Install a new version of the package:
npm install @fingerprint/react
  1. 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. To preserve the previous behavior, explicitly configure caching in the provider (see example below).
Change provider imports and usage
import { FpjsProvider, FingerprintJSPro, CacheLocation } from '@fingerprintjs/fingerprintjs-pro-react'
import { FingerprintProvider } from '@fingerprint/react'

<FpjsProvider
  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
    ],
  }}
>
<FingerprintProvider
  cache={{
    storage: "sessionStorage",
    duration: 3600
  }}
  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 });