I just want to ask if is it possible to change the color of the font when the value changes ? just like how trading platform works it will ticks the font . It changes the color from white to green ( when the value goes up and ) so I want to change the color of failed to red for 1 second when the value goes up and I want to change the color of sent to green for 1 second when the value goes up . is it possible to add the code inside the table cell ? thank you
here's the code of the table Cell
<TableCell sx={{ border:0.1,fontSize: 11.5, fontWeight: 200 }} align="center" style={{ paddingTop: 0,paddingBottom: 0,paddingLeft: 0,paddingRight:0, }}>{port.chargeCnt}</TableCell>
You need to:
usePrevious hook)setTimeout function to reset the colour to the default after a secondSuch:
import { usePrevious } from 'react-use';
import { useState, useEffect } from 'react';
const ChangingValue = ({ value }) => {
const previous = usePrevious(value);
const [color, setColour] = useState('black');
const [timeoutId, setTimeoutId] = useState(0);
useEffect(() => {
clearTimeout(timeoutId);
if (value > previous) {
setColour('green');
} else if (value < previous) {
setColour('red');
} else {
setColour('black');
}
const newTimeoutId = setTimeout(() => {
setColour('black');
}, 1000);
setTimeoutId('newTimeoutId');
return () => clearTimeout(newTimeoutId);
}, [value]);
return <div style={{ color }}>{value}</div>;
};