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.
Updated 6 months ago