react flash change

React-Flash-Change

Flash -Container auf Change -Requisiten

Demo

Hier ist eine Beispiel -Seite.

Es gibt Quellen in ./storybook

Installieren

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

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

Verwendung

 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

Requisiten

Eigentum	Typ	Erforderlich?	Beschreibung
vergleichen	Funktion		Funktion zum Vergleichen von Requisiten vor und nach dem Update, um auf das Flash -oder nicht zu klären. Funktionsparams: (prevProps, nextProps) . Standardmäßig vergleicht es props.value . Wenn Rücklaufzeichenfolge - ist es Flash -Klassenname.
Flashduration	Nummer		Dauer von "Flash" -Effekt in MS. Standard: 200 ms
FlashClassName	Saite		Flash-Effect-Klassenname
Flashstyle	Objekt		Flash-Effect-Style-Objekt
Klassenname	Saite		Optional benutzerdefinierter CSS -Klassenname
Stil	Objekt		Optionaler Inline -Stil
OUTERELEMENTTYPE	Reagieren $ elementtype		Tag -Name, das an document.createelement übergeben wurde, um das äußere Containerelement zu erstellen. Standard: div

Lizenz

MIT © Avin