Identifying…
; if (error) returnError: {error.message}
; returnVisitor: {result?.visitorId}
; } ``` The `/next` subpath ships with `"use client";` baked in, so you can import it from any file and only mark your own wrapper component as a client component. Under the hood it re-exports the same hook as `@fingerprintiq/js/react` — choose whichever import path you prefer. If you need a custom wrapper (e.g. to integrate with your auth flow or route changes), see the "Custom hook" pattern below. ## Client-Side Identification Create a reusable hook in a client component: ```tsx // components/Fingerprint.tsx 'use client'; export function useFingerprint() { const [visitorId, setVisitorId] = useStateIdentifying…
; if (error) returnError: {error.message}
; returnVisitor: {result?.visitorId} · Bot score: {result?.botProbability}
; } ``` The hook: - Instantiates the client once per component via `useRef` - Auto-calls `identify()` on mount (pass `manual: true` to opt out) - Exposes `loading`, `error`, and an `identify()` function for manual re-fetches - Is safe in React Strict Mode If you need custom lifecycle behavior, build your own wrapper using the pattern below. ## The `useFingerprintIQ` Hook Build a reusable hook that wraps the SDK. Using `useRef` ensures the `FingerprintIQ` instance is created only once per component tree, even in React Strict Mode. ```tsx interface FingerprintIQResult { visitorId: string; visitCount: number; confidence: number; botProbability: number; riskFactors: string[]; } function useFingerprintIQ(apiKey: string) { const [result, setResult] = useStateIdentifying device...
; if (error) returnFingerprint unavailable
; return (Visitor ID: {result?.visitorId}
Visit count: {result?.visitCount}
{result?.botProbability > 0.5 && (⚠️ Suspicious activity detected
)}