React.js

Why use FingerprintJS Pro React library

FingerprintJS Pro React is an official open-source package for React ecosystem. 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

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 can specify multiple configuration options.

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { FpjsProvider } from '@fingerprintjs/fingerprintjs-pro-react';


ReactDOM.render(
  <FpjsProvider
    cacheLocation='memory'
    loadOptions={{
      apiKey: 'fingerprintjs-pro-public-api-key',
      region: 'eu',
    }}
  >
    <App />
  </FpjsProvider>,
  document.getElementById('root')
);

Use the useVisitorData hook in your components to perform visitor identification and get the data.

import { useVisitorData } from '@fingerprintjs/fingerprintjs-pro-react'

function App() {
  const {
    isLoading,
    error,
    data,
  } = useVisitorData();

  if (isLoading) {
    return <div>Loading...</div>;
  }
  if (error) {
    return <div>An error occurred: {error.message}</div>;
  }

  if (data) {
    // perform some logic based on the visitor data
    return (
      <div>
        Welcome {data.visitorFound ? `back ${data.visitorId}` : ''}!
      </div>
    );
  } else {
    return null;
  }
}

export default App;

Documentation

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