use color change

use color change

플래시 소스 코드

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 이므로 대신 배경색을 애니메이션 할 수 있습니다.