FingerprintJS Pro React

FingerprintJS Pro React is an easy-to-use React library for FingerprintJS Pro. It's also compatible with the Next.js framework. SPA and Next.js examples are located in the examples folder. This package works with FingerprintJS Pro, it is not compatible with open-source FingerprintJS. You can learn more about the difference between FingerprintJS Pro and open-source FingerprintJS in the official documentation.

Installation
Getting started
Caching strategy
Documentation
Support and feedback
License

Installation

Using npm:

npm install @fingerprintjs/fingerprintjs-pro-react

Using yarn:

yarn add @fingerprintjs/fingerprintjs-pro-react

Getting started

In order to identify visitors, you'll need a FingerprintJS Pro account (you can sign up for free). You can learn more about API keys in the official FingerprintJS Pro documentation.

Wrap your application (or component) in FpjsProvider. You can specify multiple configuration options.
Set a region if you have chosen a non-global region during registration. Please refer to the Regions page.

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

const root = ReactDOM.createRoot(document.getElementById('app'))

root.render(
  <FpjsProvider
    loadOptions = {{
      apiKey: 'your-fpjs-public-api-key'
    }}
  >
    <App />
  </FpjsProvider>
);

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

// src/App.js
import React from 'react';
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 occured: {error.message}</div>;
  }

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

export default App;

The useVisitorData hook also returns a getData method which can make an API call on your command.

// src/App.js
import React, { useState } from 'react';
import { useVisitorData } from '@fingerprintjs/fingerprintjs-pro-react'

function App() {
  const {
    isLoading,
    error,
    getData,
  } = useVisitorData({tag: 'subscription-form'}, { immediate: false });
  const [email, setEmail] = useState('')

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

  return (
    <div>
      <form
        onSubmit={(e) => {
          e.preventDefault()
          getData().then((data) => {
            if (data) {
              // do something with the visitor data
              // for example, append visitor data to the form data to send to your server
              console.log(data)
            }
          })
        }}
      >
        <label htmlFor='email'>Email:</label>
        <input
          id='email'
          type='email'
          name='email'
          required
          value={email}
          onChange={(e) => setEmail(e.currentTarget.value)}
        />
        <button type='submit'>Subscribe</button>
      </form>
    </div>
  );
}

export default App;

See the full code example in the examples folder.

Caching strategy

When you use FingerprintJS Pro, you pay for each API call. Our best practices recommend using cache to reduce the API call rate. The Library uses the SessionStorage cache strategy by default.

⚠️ WARNING If you use data from extendedResult, please pay additional attention to caching strategy.

Some fields from the extendedResult (e.g ip or lastSeenAt) might change for the same visitor. If you need to get the current data, it is recommended to pass ignoreCache=true inside getData function.

API Reference

You can find API reference here.

Support and feedback

For support or to provide feedback, please raise an issue on our issue tracker. If you require private support, please email us at oss-support@fingerprint.com. If you'd like to have a similar React wrapper for the open-source FingerprintJS, consider raising an issue in our issue tracker.

License

This project is licensed under the MIT license. See the LICENSE file for more info.

natapg/fingerprintjs-pro-react