react-flash-change

Flash container on change props

Demo

Here is an examples page.

There are sources in ./storybook

Install

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

Usage

importReactfrom'react';importFlashChangefrom'@avinlab/react-flash-change';constComponent=({ value })=>{<FlashChangevalue={value}flashClassName="flashing"compare={(prevProps,nextProps)=>{returnnextProps.value!==prevProps.value;}}><span>{value}</span></FlashChange>;};

API

Props

Property	Type	Required?	Description
compare	Function		Function to compare props before and after update to resolve to flash or not. Function params: (prevProps, nextProps). Default it compares props.value. If return string - it will be flash className.
flashDuration	Number		Duration of "flash"-effect in ms. Default: 200ms
flashClassName	String		Flash-effect className
flashStyle	Object		Flash-effect style object
className	string		Optional custom CSS class name
style	Object		Optional inline style
outerElementType	React$ElementType		Tag name passed to document.createElement to create the outer container element. Default: div

License

MIT © avin