Skip to main content
The Fingerprint React SDK is an easy way to integrate Fingerprint into your Next.js application. It supports all capabilities of the JS agent and provides a built-in caching mechanism.

​
How to install

Add @fingerprint/react as a dependency to your application via npm or yarn. 
npm install @fingerprint/react
Wrap your application (or component) in FingerprintProvider. You need to specify your public API key and other configuration options based on your chosen region and active integration.
JavaScript
// pages/_app.tsx
import {FingerprintProvider} from '@fingerprint/react'
import {AppProps} from 'next/app'

export default function MyApp({Component, pageProps}: AppProps) {
  return (
    <FingerprintProvider
      apiKey="<PUBLIC_API_KEY>"
      endpoints={[
        // "https://metrics.yourwebsite.com"
      ]}
    >
      <Component {...pageProps} />
    </FingerprintProvider>
  )
}
Use the useVisitorData hook in your components to identify visitors.
JavaScript
// pages/index.tsx
import {useVisitorData} from '@fingerprint/react'

export default function Home() {
  const { isLoading, error, data, getData } = useVisitorData(
    { immediate: true },
  )

  return (
    <div>
      <button onClick={() => getData()}>
        Reload data
      </button>
      <p>VisitorId: {isLoading ? 'Loading...' : data?.visitor_id}</p>
      <p>Full visitor data:</p>
      <pre>{error ? error.message : JSON.stringify(data, null, 2)}</pre>
    </div>
  )
}

​
Documentation

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

​
Migration guide for React SDK v3.0.0

You can find the migration guide on the React SDK page.