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

執照

麻省理工學院