use color change

Использование цвета

React Hook для прошивки числового значения при его изменении

Установка

Этот модуль может использоваться в любом проекте 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 , что позволяет вместо этого анимировать цвет фона.

Автор

© Джонни Бургер

Лицензия

Грань