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>
Advertisement
Answer
You need to:
- Track the previous value (use the
usePrevious
hook) - Compare it to the current value whenever the current value changes and use that to determine what colour to set it to
- Add a
setTimeout
function to reset the colour to the default after a second - Handle the case where the value changes again before the reset has happened (by cancelling the timeout waiting to reset it).
- Cancel that timeout when the component unmounts (so you don’t try to set a state that no longer exists).
Such:
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>; };