Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

279
Vistas
How to change the color of font everytime the value change?

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>
about 4 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

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>;
};
about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda