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


Did this page help you?