use color change

Uso del color-cambio

React Hook para parpadear un valor numérico cuando cambia

Instalación

Este módulo se puede usar en cualquier proyecto React que admita los ganchos.

 npm i use-color-change

Uso

Use el gancho y pase un número como el primer parámetro. Especifique los colores que desea parpadear y cuánto tiempo debe tomar la animación. El valor de retorno del gancho tiene el tipo {animation: string} , puede pasarlo como un estilo para cualquier elemento y también personalizarlo, por ejemplo, usando animation-timing-function si lo hace.

 export const App = ( ) => {
    const [ value , setValue ] = useState ( 0 ) ;
    const colorStyle = useColorChange ( value , {
        higher : 'limegreen' ,
        lower : 'crimson' ,
        duration : 1800
    } ) ;

    return < div style = { colorStyle } > { value } </ div > ;
} ; 

Firma de función

 useColorChange ( value : number , {
    higher : string | null ;
    lower: string | null ;
    duration?: number | undefined ;
} )

• value : el valor numérico para el que debe basarse la animación.
• options :
  • higher : el color que debería parpadear cuando aumenta el valor. Puedes pasar null sin animación.
  • lower : el color que debe parpadear cuando el valor disminuye. Puedes pasar null sin animación.
  • duration : (opcional) ¿Cuánto tiempo debe tomar el flash en milisegundos? El valor predeterminado es 1800 .
  • property : (opcional) color o background-color , lo que le permite animar el color de fondo.

Autor

© Jonny Burger

Licencia

MIT