using JavaScript library in ReactJS HeatMapjs

Question

i need help

I want to use this running example of heatmapjs in ReactJS, how can I achieve the desire of my heart

code sandbox live: https://it5gt4.csb.app/
code-sandbox code editor: https://codesandbox.io/s/simple-heatmapjs-example-to-change-to-react-it5gt4?file=/index.html

this code is just a heat-map graph, which is [x,y,z] graph in the x, and y are the regular cartesian graph axis and the color is the value property

I want to convert this simple example into a reactjs code.

I don't understand how to modify the code to achieve what I want. because I find it weird, ReactJS doesn't want me to use a query selector to manipulate the DOM but the library I use, wants to catch the element and do stuff with it. therefore I couldn't even have an answer to "What have you tried?" because I miss the concept of how should I approach this issue.

thanks in advance! and have a great day

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Simple Heatmap.js Example</title>
    <script src="https://cdn.jsdelivr.net/npm/heatmap.js@2.0.5/build/heatmap.min.js"></script>
    <style>
      #heatmapArea {
        width: 400px;
        height: 400px;
        position: relative; /* if not already set */
        border: black solid 4px;
      }
    </style>
  </head>
  <body>
    <div id="heatmapArea"></div>

    <script>
      var heatmapInstance = h337.create({
        container: document.querySelector("#heatmapArea"),
      });
      var points = [
        { x: 10, y: 10, value: 100 },
        { x: 100, y: 100, value: 50 },
        { x: 200, y: 200, value: 70 },
      ];

      heatmapInstance.setData({
        data: points,
        max: 100,
      });
    </script>
  </body>
</html>

I already looked up the same question, but old answers that use class components or are just too complicated for me to use the same logic.

score 1 · Answer 1 · answered Jun 06 '23 at 15:49

So, you can try this code. Though it's unlabeled.

Here you go



import React, { useEffect, useRef, useState } from "react";
import h337 from "heatmap.js";

const HeatMap: React.FC = () => {
  useEffect(() => {
    if (!!document.querySelector(".heatmap")) {
      var heatmapInstance = h337.create({
        container: document.querySelector(".heatmap")!,
        radius: 10,
        maxOpacity: 0.5,
        minOpacity: 0,
        blur: 0.75,
      });

      var points = [];
      var max = 0;
      var width = 840;
      var height = 400;
      var len = 200;

      while (len--) {
        var val = Math.floor(Math.random() * 1000);
        max = Math.max(max, val);
        var point = {
          x: Math.floor(Math.random() * width),
          y: Math.floor(Math.random() * height),
          value: val,
        };
        points.push(point);
      }
      // heatmap data format
      var data = {
        max: max,
        min: 0,
        data: points,
      };

      heatmapInstance.setData(data);
    }
  }, []);
  return (
    <div className="heatmap" style={{ width: "100%", height: "100" }}></div>
  );
};

export default HeatMap;

using JavaScript library in ReactJS HeatMapjs

1 Answers1