use color change

Uso-cor-mudança

React Hook para piscar um valor numérico quando muda

Instalação

Este módulo pode ser usado em qualquer projeto React que suporta ganchos.

 npm i use-color-change

Uso

Use o gancho e passe um número como o primeiro parâmetro. Especifique as cores que deseja piscar e quanto tempo a animação deve levar. O valor de retorno do gancho possui o tipo {animation: string} , você pode passá-lo como um estilo para qualquer elemento e também personalizá-lo, por exemplo, usando animation-timing-function se quiser.

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

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

Assinatura da função

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

• value : o valor numérico para o qual a animação deve ser baseada.
• options :
  • higher : a cor que deve estar piscando quando o valor aumenta. Você pode passar null sem animação.
  • lower : a cor que deve estar piscando quando o valor diminui. Você pode passar null sem animação.
  • duration : (opcional) Quanto tempo o flash deve levar em milissegundos. O padrão é 1800 .
  • property : (opcional) color ou background-color , permitindo que você anime a cor do plano de fundo.

Autor

© Jonny Burger

Licença

Mit