FingerprintJS Pro React
FingerprintJS Pro React is an easy-to-use React library for FingerprintJS Pro. 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.
Table of contents
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';
import { FpjsProvider } from '@fingerprintjs/fingerprintjs-pro-react';
import App from './App';
ReactDOM.render(
<FpjsProvider
loadOptions = {{
apiKey: 'your-fpjs-public-api-key'
}}
>
<App />
</FpjsProvider>,
document.getElementById('app')
);
- Use the
useVisitorDatahook 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
extendedResult, please pay additional attention to caching strategy.
FingerprintJS Pro uses API calls as the basis for billing. Our best practices strongly recommend using cache to optimise API calls rate. The Library uses the SessionStorage cache strategy by default.
Some fields from the extendedResult (e.g ip or lastSeenAt) might change for the same visitor. If you need exact current data, it is recommended to pass ignoreCache=true inside getData function.
Documentation
This library uses FingerprintJS Pro agent internally. The documentation for the FingerprintJS Pro agent is available on https://dev.fingerprintjs.com/docs.
FpjsProvider props
loadOptions: FingerprintJS.LoadOptions
Options for the FingerprintJS JS Pro agent load() method. Options follow agent's initialisation properties.
cacheLocation?: CacheLocation
Defines which built-in cache mechanism the client should use. Caching options follow properties defined in fingerprintjs-pro-spa repository.
cache?: ICache
Custom cache implementation. Takes precedence over the cacheLocation property. Caching options follow properties defined in fingerprintjs-pro-spa repository.
cacheTimeInSeconds?: number
Duration in seconds for which data is stored in the cache. Cannot exceed 86_400 (24h) because caching data for longer than 24 hours can negatively affect identification accuracy. Caching options follow properties defined in fingerprintjs-pro-spa repository.
cachePrefix?: string
Custom prefix for localStorage and sessionStorage cache keys. Will be ignored if the cache is provided. Caching options follow properties defined in fingerprintjs-pro-spa repository.
Hooks
useVisitorData(getOptions, config)
useVisitorData hook performs identification requests with the FingerprintJS Pro API. The returned object contains information about loading status, errors, and visitor.
Params
getOptions: GetOptions<TExtended>parameter follows parameters of the FingerprintJS Pro'sgetfunction.config: UseVisitorDataConfig's propertyimmediatedetermines whether thegetData()method will be called immediately after the hook mounts or not.
Returned object
getData: ({ignoreCache?: boolean}) => Promise<VisitorData>Performs identification request to server and returns visitors data.isLoading: booleanIndicatesgetDatarequest status.data: VisitorDataContains visitors data requested aftergetData()call.error: ErrorError information in case the request failed.
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 [email protected]. 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.
7 Nov 2, 2022
9 Mar 23, 2022
7 May 31, 2022
5 Feb 23, 2022
3 May 18, 2022
4 May 3, 2022
14 Jan 3, 2023
3 Feb 21, 2022
10 Feb 25, 2022
5 Mar 29, 2022
6 Jun 27, 2022
8 May 29, 2022
5 May 27, 2022
8 Sep 6, 2022
7 Jul 14, 2022
14 Sep 26, 2022
5 Aug 23, 2022
6 Aug 24, 2022
8 Aug 26, 2022