How can i apply Gauge.js within React JS

[ashanjayasundara]

i want to integrate Gauge.js in React.js so is there a way to integrate this

[ricardosaumeth]

Create a file let's say gauge.js. Paste the minify content. or if you want the unminify content. In you react class or component import the file using destructuring.

e.g. import { Gauge } from './gaugeSource/gauge.min';

[RGKrish183]

Any sample patch available? I tried like @ricardosaumeth below its getting Cannot read property 'getContext' of null

import React from "react";
import ReactDOM from "react-dom";

import "./styles.css";
import { Gauge } from './gauge.min';


function App() {

  
  let selectGauge3 = new Gauge(document.getElementById("select-3"));
  var opts = {
    angle: -0.25,
    lineWidth: 0.2,
    pointer: {
      length: 0.6,
      strokeWidth: 0.05,
      color: '#000000'
    },
    staticZones: [
       {strokeStyle: "#F03E3E", min: 0, max: 200},
       {strokeStyle: "#FFDD00", min: 200, max: 500},
       {strokeStyle: "#30B32D", min: 500, max: 2100},
       {strokeStyle: "#FFDD00", min: 2100, max: 2800},
       {strokeStyle: "#F03E3E", min: 2800, max: 3000}
    ],
    limitMax: false,
    limitMin: false,
    strokeColor: '#E0E0E0',
    highDpiSupport: true
  };
  selectGauge3.minValue = 0;
  selectGauge3.maxValue = 3000;
  selectGauge3.setOptions(opts);
  selectGauge3.set(1607);
  
  return (
    <div className="App">
<canvas  id="select-3"></canvas>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

[keanemind]

I found this thread this morning when I was in the same situation as the OP. For anyone who is still having trouble integrating with React, I created a wrapper React component here: https://github.com/keanemind/react-gaugejs. I would appreciate any help with finding bugs or pull requests to make it better!