react flash change

React-Flash-troca

Contêiner flash em alterações adereços

Demonstração

Aqui está uma página de exemplos.

Existem fontes em ./storybook

Instalar

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

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

Uso

 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

Adereços

Propriedade	Tipo	Obrigatório?	Descrição
comparar	Função		Função para comparar adereços antes e depois da atualização para resolver o Flash ou não. Parâmetros da função: (prevProps, nextProps) . Padrão ele compara props.value . Se Return String - ele será o Flash ClassName.
flashduration	Número		Duração do efeito "flash" em ms. Padrão: 200ms
FlashclassName	Corda		Nome da classe de efeito flash
Flashstyle	Objeto		Objeto de estilo de efeito flash
ClassName	corda		Nome da classe CSS personalizado opcional
estilo	Objeto		Estilo embutido opcional
ExterrelementType	Reaja $ elementType		Nome da tag Passado para document.createElement para criar o elemento de contêiner externo. Padrão: div

Licença

MIT © Avin