Skip to content

Instantly share code, notes, and snippets.

@tmkasun

tmkasun/Gauge.jsx

Created Feb 18, 2021
Embed
What would you like to do?
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

This comment has been minimized.

Copy link
Owner Author

@tmkasun tmkasun commented Feb 18, 2021

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