use color change

usage-coulor-change

React Hook pour clignoter une valeur numérique lorsqu'elle change

Installation

Ce module peut être utilisé dans n'importe quel projet React qui prend en charge les crochets.

 npm i use-color-change

Usage

Utilisez le crochet et passez un nombre comme premier paramètre. Spécifiez les couleurs que vous souhaitez flasher et combien de temps l'animation doit prendre. La valeur de retour du crochet a le type {animation: string} , vous pouvez le transmettre comme un style pour n'importe quel élément et le personnaliser également par exemple en utilisant animation-timing-function si vous le souhaitez.

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

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

Signature de la fonction

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

• value : la valeur numérique pour laquelle l'animation doit être basée.
• options :
  • higher : la couleur qui devrait se clignoter lorsque la valeur augmente. Vous pouvez passer null pour aucune animation.
  • lower : la couleur qui devrait clignoter lorsque la valeur diminue. Vous pouvez passer null pour aucune animation.
  • duration : (facultative) Combien de temps le flash doit prendre en Milisecondes. La valeur par défaut est 1800 .
  • property : (facultative) color ou background-color , vous permettant d'animer la couleur d'arrière-plan à la place.

Auteur

© Jonny Burger

Licence

Mit