use color change

Verwendung von Farben

React Hook, um einen numerischen Wert zu blinken, wenn er ändert

Installation

Dieses Modul kann in jedem React -Projekt verwendet werden, das Haken unterstützt.

 npm i use-color-change

Verwendung

Verwenden Sie den Haken und geben Sie eine Zahl als erster Parameter über. Geben Sie die Farben an, die Sie blinken möchten und wie lange die Animation dauern sollte. Der Rückgabewert des Hakens hat den Typ {animation: string} . Sie können ihn als Stil für jedes Element übergeben und ihn beispielsweise weiter anpassen animation-timing-function wenn Sie dies möchten.

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

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

Funktionssignatur

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

• value : Der numerische Wert, für den die Animation basieren sollte.
• options :
  • higher : Die Farbe, die blinken sollte, wenn der Wert zunimmt. Sie können null für keine Animation übergeben.
  • lower : Die Farbe, die blinken sollte, wenn der Wert abnimmt. Sie können null für keine Animation übergeben.
  • duration : (optional) Wie lange sollte der Blitz in Miliskunden aufnehmen. Standard ist 1800 .
  • property : (optional) entweder color oder background-color , sodass Sie stattdessen die Hintergrundfarbe animieren können.

Autor

© Jonny Burger

Lizenz

MIT