Skip to content

Instantly share code, notes, and snippets.

@tmkasun
Created February 18, 2021 17:43
Show Gist options
  • Save tmkasun/5df0d8ba6690354cd6a305185f9d45cd to your computer and use it in GitHub Desktop.
Save tmkasun/5df0d8ba6690354cd6a305185f9d45cd to your computer and use it in GitHub Desktop.
How to use canvas-gauges with React using Reeact hooks
import { LinearGauge, RadialGauge } from 'canvas-gauges'
import React, { useEffect, useRef } from 'react'
export default (props) => {
const { value, isRadial = false } = props;
const gaugeDOM = useRef();
const gauge = useRef();
useEffect(() => {
const options = Object.assign({}, props, {
renderTo: gaugeDOM.current
})
gauge.current = isRadial ? new RadialGauge(options).draw() : new LinearGauge(options).draw();
}, []);
useEffect(() => {
gauge.current.value = value;
gauge.current.update();
}, [value])
return (
<canvas
ref={gaugeDOM} />
)
}
@tmkasun
Copy link
Author

tmkasun commented Feb 18, 2021

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment