use color change

use color change

FLASHソースコード

1.0.0

ダウンロード

ユースカラー変更

数値が変更されたときにフラッシュするためのフックを反応させる

インストール

このモジュールは、フックをサポートする任意のReactプロジェクトで使用できます。

 npm i use-color-change

使用法

フックを使用して、最初のパラメーターとして番号を渡します。フラッシュする色とアニメーションがどれくらいの時間をかけるかを指定します。フックの返品値には、タイプ{animation: string}があり、あらゆる要素のスタイルとして渡すことができ、たとえばanimation-timing-functionを使用してさらにカスタマイズできます。

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

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

関数の署名

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

value ：アニメーションが基づいている数値。
options ：
- higher ：値が増加したときに点滅する色。アニメーションなしでnullを渡すことができます。
- lower ：値が減少したときに点滅する必要がある色。アニメーションなしでnullを渡すことができます。
- duration ：（オプション）フラッシュがミリ秒でどれくらいの時間をかけるべきか。デフォルトは1800です。
- property ：（オプション） colorまたはbackground-colorいずれかで、代わりに背景色をアニメーション化できます。