React usage

React integration for ThumbmarkJS - browser fingerprinting library.

Installation

npm install @thumbmarkjs/thumbmarkjs @thumbmarkjs/react

Usage

1. Wrap your app or a specific component

import { ThumbmarkProvider } from '@thumbmarkjs/react';

function App() {
  return (
    <ThumbmarkProvider>
      <MyComponent />
    </ThumbmarkProvider>
  );
}

2. Use the hook

import { useThumbmark } from '@thumbmarkjs/react';

function MyComponent() {
  const { thumbmark, visitorId, isLoading, error, reload } = useThumbmark();

  if (isLoading) return <div>Loading...</div>;
  if (error) return <div>Error: {error.message}</div>;

  return (
    <div>
      <div>Visitor ID: {visitorId}</div>
      <div>Thumbmark: {thumbmark}</div>
      <button onClick={reload}>Reload</button>
    </div>
  );
}

With API Key

<ThumbmarkProvider apiKey="your-key">
  <MyComponent />
</ThumbmarkProvider>

With Options

<ThumbmarkProvider
  apiKey="your-key"
  options={{
    timeout: 3000,
    exclude: ['webgl']
  }}
>
  <MyComponent />
</ThumbmarkProvider>

API

<ThumbmarkProvider>

Prop	Type	Description
apiKey	string	Optional API key for the hosted ThumbmarkJS API
options	ThumbmarkOptions	Optional configuration options passed to the underlying Thumbmark instance

useThumbmark()

Returns an object with the following fields:

Field	Type	Description
thumbmark	string | null	The generated thumbmark hash
visitorId	string | null	The visitor ID (when API is used)
components	Record<string, any> | null	Raw fingerprint components
info	Record<string, any> | null	Additional info returned by the API
isLoading	boolean	Loading state
error	Error | null	Error state
reload	() => Promise<void>	Re-generate the thumbmark

The hook is SSR-safe — it only runs on the client.

See also the configuration options.