Gathering detailed insights and metrics for @fingerprintjs/fingerprintjs-pro-react
Gathering detailed insights and metrics for @fingerprintjs/fingerprintjs-pro-react
Gathering detailed insights and metrics for @fingerprintjs/fingerprintjs-pro-react
Gathering detailed insights and metrics for @fingerprintjs/fingerprintjs-pro-react
Fingerprint Pro Wrapper for React Single Page Applications (SPA)
npm install @fingerprintjs/fingerprintjs-pro-react
Typescript
Module System
Node Version
NPM Version
TypeScript (87.08%)
JavaScript (10.87%)
Shell (2.05%)
Total Downloads
0
Last Day
0
Last Week
0
Last Month
0
Last Year
0
MIT License
59 Stars
408 Commits
12 Forks
8 Watchers
4 Branches
18 Contributors
Updated on Jun 20, 2025
Latest Version
2.6.3
Package Id
@fingerprintjs/fingerprintjs-pro-react@2.6.3
Unpacked Size
264.15 kB
Size
41.56 kB
File Count
9
NPM Version
10.1.0
Node Version
20.8.1
Published on
Mar 21, 2024
Cumulative downloads
Total Downloads
Last Day
0%
NaN
Compared to previous day
Last Week
0%
NaN
Compared to previous week
Last Month
0%
NaN
Compared to previous month
Last Year
0%
NaN
Compared to previous year
2
39
Fingerprint is a device intelligence platform offering 99.5% accurate visitor identification. Fingerprint Pro React SDK is an easy way to integrate Fingerprint Pro into your React application. It's also compatible with Next.js and Preact. See application demos in the examples folder.
[!NOTE] This package assumes you have a Fingerprint Pro subscription or trial, it is not compatible with the source-available FingerprintJS. See our documentation to learn more about the differences between Fingerprint Pro and FingerprintJS.
Using npm:
1npm install @fingerprintjs/fingerprintjs-pro-react
Using yarn:
1yarn add @fingerprintjs/fingerprintjs-pro-react
Using pnpm:
1pnpm add @fingerprintjs/fingerprintjs-pro-react
In order to identify visitors, you'll need a Fingerprint Pro account (you can sign up for free). To get your API key and get started, see the Fingerprint Pro Quick Start Guide.
<FpjsProvider>
.apiKey
to your Fingerprint Public API Key.region
if you have chosen a non-global region during registration.endpoint
and scriptUrlPattern
if you are using one of our proxy integrations to increase accuracy and effectiveness of visitor identification.1// src/index.js 2import React from 'react' 3import ReactDOM from 'react-dom/client' 4import { FpjsProvider /*, FingerprintJSPro */ } from '@fingerprintjs/fingerprintjs-pro-react' 5import App from './App' 6 7const root = ReactDOM.createRoot(document.getElementById('app')) 8 9root.render( 10 <FpjsProvider 11 loadOptions={{ 12 apiKey: 'your-public-api-key', 13 // region: 'eu', 14 // endpoint: ['metrics.yourwebsite.com', FingerprintJSPro.defaultEndpoint], 15 // scriptUrlPattern: ['metrics.yourwebsite.com/agent-path', FingerprintJSPro.defaultScriptUrlPattern], 16 }} 17 > 18 <App /> 19 </FpjsProvider> 20)
useVisitorData()
hook in your components to identify visitors1// src/App.js 2import React from 'react' 3import { useVisitorData } from '@fingerprintjs/fingerprintjs-pro-react' 4 5function App() { 6 const { isLoading, error, data } = useVisitorData() 7 8 if (isLoading) { 9 return <div>Loading...</div> 10 } 11 if (error) { 12 return <div>An error occured: {error.message}</div> 13 } 14 15 if (data) { 16 // Perform some logic based on the visitor data 17 return ( 18 <div> 19 Welcome {data.visitorFound ? 'back' : ''}, {data.visitorId}! 20 </div> 21 ) 22 } else { 23 return null 24 } 25} 26 27export default App
The useVisitorData
hook also returns a getData
method you can use to make an API call on command.
1// src/App.js 2import React, { useState } from 'react' 3import { useVisitorData } from '@fingerprintjs/fingerprintjs-pro-react' 4 5function App() { 6 const { isLoading, error, getData } = useVisitorData({ tag: 'subscription-form' }, { immediate: false }) 7 const [email, setEmail] = useState('') 8 9 if (isLoading) { 10 return <div>Loading...</div> 11 } 12 if (error) { 13 return <div>An error occurred: {error.message}</div> 14 } 15 16 return ( 17 <div> 18 <form 19 onSubmit={(e) => { 20 e.preventDefault() 21 getData() 22 .then((data) => { 23 // Do something with the visitor data, for example, 24 // append visitor data to the form data to send to your server 25 console.log(data) 26 }) 27 .catch((error) => { 28 // Handle error 29 }) 30 }} 31 > 32 <label htmlFor='email'>Email:</label> 33 <input type='email' value={email} onChange={(e) => setEmail(e.currentTarget.value)} /> 34 <button type='submit'>Subscribe</button> 35 </form> 36 </div> 37 ) 38} 39 40export default App
The visitorId
provided by Fingerprint Identification is especially useful when combined with information you already know about your users, for example, account IDs, order IDs, etc. To learn more about various applications of the linkedId
and tag
, see Linking and tagging information.
Associate the visitor ID with your data using the linkedId
or tag
parameter of the options object passed into the useVisitorData()
hook or the getData
function:
1// ... 2 3function App() { 4 const { 5 isLoading, 6 error, 7 getData 8 } = useVisitorData({ 9 linkedId: "user_1234", 10 tag: { 11 userAction: "login", 12 analyticsId: "UA-5555-1111-1" 13 } 14 }); 15 16// ...
Fingerprint Pro usage is billed per API call. To avoid unnecessary API calls, it is a good practice to cache identification results. By default, the SDK uses sessionStorage
to cache results.
cacheLocation
prop on <FpjsProvider>
to instead store results in memory
or localStorage
. Use none
to disable caching completely.cache
prop on <FpjsProvider>
to use your custom cache implementation instead. For more details, see Creating a custom cache
in the Fingerprint Pro SPA repository (a lower-level Fingerprint library used by this SDK).{ignoreCache: true}
to the getData()
function to ignore cached results for that specific API call.[!NOTE] If you use data from
extendedResult
, pay additional attention to your caching strategy. Some fields, for example,ip
orlastSeenAt
, might change over time for the same visitor. UsegetData({ ignoreCache: true })
to fetch the latest identification results.
The getData
function throws errors directly from the JS Agent without changing them. See JS Agent error handling for more details.
See the full generated API reference.
To ask questions or provide feedback, use Issues. If you need 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 creating an issue in the main FingerprintJS repository.
This project is licensed under the MIT license. See the LICENSE file for more info.
No vulnerabilities found.
No security vulnerabilities found.