Skip to main content

Install with NPM

The NPM package is @thumbmarkjs/thumbmarkjs. Install it with:

npm install @thumbmarkjs/thumbmarkjs

In a React or Vue app, you can use the integrations package in your frontend. See React usage and Vue usage.

You don't need to though. Below is an example of how to use the client directly without the integration plugin in a NextJS app.

Using ThumbmarkJS client directly in a NextJS app​

ThumbmarkJS is a client-side library, so you need to ensure that the get() call is not run on the server side. In the below example, we use the useEffect hook to run the get() call on the client side.

"use client"

import React, { useState, useEffect } from 'react';
import { Thumbmark } from "@thumbmarkjs/thumbmarkjs";

function Fingerprint() {
    const [thumbmark, setThumbmark] = useState('');
  
    useEffect(() => {
      const tm = new Thumbmark;
      tm.get()
        .then((result) => {
          setThumbmark(result.thumbmark);
        })
        .catch((error) => {
          console.error('Error getting fingerprint:', error);
        });
    }, []);
    
    return (
      <>{thumbmark}</>
    );
  }

export default Fingerprint