Skip to main content
The Fingerprint React SDK is an easy way to integrate Fingerprint into your Preact 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
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
// src/components/app.js
import {
  FpjsProvider,
  FingerprintJSPro
} from '@fingerprintjs/fingerprintjs-pro-react';
import Home from '../routes/home';

export default function Wrapper() {
  return (
    <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"
      }}
    >
      <Home />
    </FpjsProvider>
  );
}
Use the useVisitorData hook in your components to identify visitors.
JavaScript
// src/routes/home/index.js
import {useVisitorData} from '@fingerprintjs/fingerprintjs-pro-react'

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

  return (
    <div id='preact_root'>
      <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>
  )
}
Note: The Fingerprint React SDK is available as an NPM package. If you are using Preact without a build tool, you can use the JS agent directly by importing it from our CDN.

​
Documentation

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