0

I am using reactjs to make a webapp that has a gauge that shows the readings from a pressure sensor. For the gauge web component I am using canvas-gauges.

canvas-gauges has a reactjs wrapper but it is still using componentWillReceiveProps, componentDidMount and I want to use hooks so I tried writing my own custom component.

I am using useRef with a canvas component to render my gauge component. In order to update the gauge value I just pass a prop on that component.

import React, { useRef, useEffect } from "react";
import { RadialGauge } from "canvas-gauges";

const PressureGauge = (props) => {
  const value = props.value;

  const canvasRef = useRef(null);

  const draw = (canvas, value) => {
    new RadialGauge({
      renderTo: canvas,
      value: value,
      width: 300,
      height: 300,
      title: "Pressure",
      units: "bar",
      minValue: 100,
      maxValue: 400,
    }).draw();
  };

  useEffect(() => {
    const canvas = canvasRef.current;

    const render = () => draw(canvas, value);

    render();

  }, [value]);

  return <canvas ref={canvasRef}  />;
};

export default PressureGauge;

This code works on my computer using google chrome or safari but when I use google chrome in my phone it just crashes after a few updates on the gauge value with this error:

TypeError: null is not an object(evaluating 'this.contextClone.translate')

I am not very knowledgeable about this yet but I think this component rerenders multiple times that the phone cannot handle it.

My question:

  1. What's a better way to use and update custom web components in reactjs.
thelimpbacon
  • 1
  • 1
  • 2
  • Hi, I build a simple react app with your code. Used a button and a counter to simulate the readings from the pressure sensor. It worked fine. Also in the chrome browser on an Android phone. Even when I used setInterval to simulate a burst of readings. – Karlan Aug 23 '20 at 13:07
  • Major headaches trying to work existing **native** Web Components into React. They just don't play well because of [Reacts hold on the DOM](https://stackoverflow.com/questions/63226698/is-it-really-necessary-to-make-and-use-new-custom-elements-and-web-components-h/63228421#63228421). Rewrite the whole Component in React; or my case, ditch React – Danny '365CSI' Engelman Aug 23 '20 at 16:33

0 Answers0