use color change

用颜色变化

当数值更改时闪烁数字值的React挂钩

安装

该模块可用于支持钩子的任何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 ，使您可以使背景颜色动画。

作者

©Jonny Burger

执照

麻省理工学院