Skip to main content

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 } = useThumbmark();

  if (isLoading) return <div>Loading...</div>;

  return (
    <div>
      <div>Visitor ID: {visitorId}</div>
      <div>Thumbmark: {thumbmark}</div>
    </div>
  );
}

With API Key​

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

With Options​

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

That's it! See also the configuration options.