https://github.com/avin/react-flash-change

Flash container on change props
https://github.com/avin/react-flash-change

detect-changes flash highlight react

Last synced: 1 day ago
JSON representation

Flash container on change props

• Host: GitHub
• URL: https://github.com/avin/react-flash-change
• Owner: avin
• Created: 2018-10-25T15:42:44.000Z (about 6 years ago)
• Default Branch: master
• Last Pushed: 2019-01-06T17:51:25.000Z (almost 6 years ago)
• Last Synced: 2024-04-25T05:20:52.452Z (7 months ago)
• Topics: detect-changes, flash, highlight, react
• Language: JavaScript
• Homepage: https://avin.github.io/react-flash-change
• Size: 519 KB
• Stars: 12
• Watchers: 3
• Forks: 1
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md

Awesome Lists containing this project

README

        
# react-flash-change

> Flash container on change props

[![NPM registry](https://img.shields.io/npm/v/@avinlab/react-flash-change.svg?style=for-the-badge)](https://yarnpkg.com/en/package/@avinlab/react-flash-change) [![NPM license](https://img.shields.io/badge/license-mit-red.svg?style=for-the-badge)](LICENSE)

## Demo

Here is an [examples page](https://avin.github.io/react-flash-change).

There are sources in `./storybook`

## Install

```bash

# Yarn

yarn add @avinlab/react-flash-change

# NPM

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

```

## Usage

```js

import React from 'react';

import FlashChange from '@avinlab/react-flash-change';

const Component = ({ value }) => {

     {

            return nextProps.value !== prevProps.value;

        }}

    >

        {value}

    ;

};

```

## 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](https://github.com/avin)