1.2.0 • Published 5 years ago
@avinlab/react-flash-change v1.2.0
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-changeUsage
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
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