Preact

Suggest Edits

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

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/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.

// 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.

Updated 4 months ago