Preact

FingerprintJS Pro React library fully supports Preact

Why use FingerprintJS Pro React library with Preact

FingerprintJS Pro React is an official open-source package for React ecosystem including support for Preact. This library provides developers with native experience using React components and hooks together with a built-in caching mechanism. All Fingerprint Pro agent capabilities are fully supported.

Sample usage

  1. 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
  1. Wrap your application (or component) in FpjsProvider. You can specify multiple configuration options.
import { FpjsProvider } from '@fingerprintjs/fingerprintjs-pro-react'
import Content from './content';

const Wrapper = () => (
  <>
    <h1>Preact App</h1>
    <FpjsProvider
      loadOptions={{
        apiKey: '<fingerprintjs-pro-public-api-key>',
        region: 'eu'
      }}
    >
      <Content />
    </FpjsProvider>
  </>
);

export default Wrapper;
  1. Use the useVisitorData hook in your components to perform visitor identification and get the data.
import { useState } from 'preact/hooks'
import { useVisitorData } from '@fingerprintjs/fingerprintjs-pro-react'

const Content = () => {
  const [extendedResult, updateExtendedResult] = useState(false)
  const { isLoading, error, data, getData } = useVisitorData({ extendedResult }, { immediate: true })

  const reloadData = () => {
    getData({ ignoreCache: true })
  }

  const onChangeExtendedResult = (e) => {
    updateExtendedResult(e.target.checked)
  }

  return (
    <div id='preact_root' className='container'>
      <h1>FingerprintJS Pro Preact Demo</h1>
      <div className='testArea'>
        <div className='controls'>
          <button onClick={reloadData} type='button'>
            Reload data
          </button>
          <label>
            <input type='checkbox' onInput={onChangeExtendedResult} checked={extendedResult} />
            Extended result
          </label>
        </div>
        <h4>
          VisitorId: <span className='visitorId'>{isLoading ? 'Loading...' : data?.visitorId}</span>
        </h4>
        <h4>Full visitor data:</h4>
        <pre className='data'>{error ? error.message : JSON.stringify(data, null, 2)}</pre>
      </div>
    </div>
  )
}

export default Content

Documentation

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