react flash change

반응-플래시 변화

변경 소품의 플래시 컨테이너

데모

여기 예제 페이지가 있습니다.

./storybook 에는 소스가 있습니다

설치하다

 # Yarn
yarn add @avinlab/react-flash-change

# NPM
npm install --save @avinlab/react-flash-change

용법

 import React from 'react' ;
import FlashChange from '@avinlab/react-flash-change' ;

const Component = ( { value } ) => {
    < FlashChange
        value = { value }
        flashClassName = "flashing"
        compare = { ( prevProps , nextProps ) => {
            return nextProps . value !== prevProps . value ;
        } }
    >
        < span > { value } </ span >
    </ FlashChange > ;
} ; 

API

소품

재산	유형	필수의?	설명
비교하다	기능		업데이트 전후에 소품을 비교하여 플래시로 해결되거나 해지도록 기능합니다. 함수 매개 변수 : (prevProps, nextProps) . 기본값은 props.value 비교합니다. Return String이면 Flash ClassName이됩니다.
플래시	숫자		MS에서 "플래시"-효과 기간. 기본값 : 200ms
FlashClassName	끈		Flash-Effect ClassName
플래시 스타일	물체		플래시 효과 스타일 객체
클래스 이름	끈		선택적 사용자 정의 CSS 클래스 이름
스타일	물체		선택적 인라인 스타일
외부 유형	$ ElementType에 반응합니다		태그 이름은 hodep.createElement로 전달되었습니다. 외부 컨테이너 요소를 생성합니다. 기본값 : div

특허

MIT © Avin