react flash change

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

Реквизит

Свойство	Тип	Необходимый?	Описание
сравнивать	Функция		Функция для сравнения реквизитов до и после обновления, чтобы решить, чтобы прорвать или нет. Функция Params: (prevProps, nextProps) . По умолчанию это сравнивает props.value . Если return String - это будет Flash ClassName.
Flashduration	Число		Продолжительность «Flash»-эффект в MS. По умолчанию: 200 мс
FlashclassName	Нить		Флэш-эффект ClassName
Flashstyle	Объект		Флэш-эффект стиля объекта
классное имя	нить		Необязательное пользовательское имя класса CSS
стиль	Объект		Дополнительный встроенный стиль
OuterElementType	React $ elementtype		Имя тега передано в Document.createElement для создания элемента внешнего контейнера. По умолчанию: div

Лицензия

MIT © Avin