React usage

In a React project you need to ensure you do not try to run Thumbmark in the server side. Thumbmark needs to be run in a browser (client) environment since it needs access to browser APIs.

In react, you would accomplish this by using useEffect, like so:

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

export default function Page() {
  const [thumbmark, setThumbmark] = useState();

  useLayoutEffect(() => {
    async function fetchData() {
      const t = new Thumbmark({api_key: "xxxxxxxxxxxxxxxxxxxxxxxxxxxx"});
      const tm = await t.get();
      setThumbmark(tm.thumbmark);
    }
    fetchData();
  }, []);