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.

How to install

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

npm install @fingerprintjs/fingerprintjs-pro-react
yarn add @fingerprintjs/fingerprintjs-pro-react

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.

// src/index.jsx
import React from 'react'
import { createRoot } from 'react-dom/client'
import App from './App'
import {
  // defaultEndpoint,
  // defaultScriptUrlPattern
} from '@fingerprintjs/fingerprintjs-pro-react'

        apiKey: "<PUBLIC_API_KEY>",
        // endpoint: ["<CUSTOM_ENDPOINT>", defaultEndpoint],
        // scriptUrlPattern: ["<CUSTOM_SCRIPT_URL>", defaultScriptUrlPattern],
        // region: "eu"
      <App />

Use the useVisitorData hook in your components to identify visitors.

// 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 (
      <button onClick={() => getData({ignoreCache: true})}>
        Reload data
      <p>VisitorId: {isLoading ? 'Loading...' : data?.visitorId}</p>
      <p>Full visitor data:</p>
      <pre>{error ? error.message : JSON.stringify(data, null, 2)}</pre>


You can find the full documentation in the official GitHub repository. The repository also contains an example app demonstrating the usage of the library.