🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

A React Component that fades out its old child, then fades in its new child when its children change.

Animation React

Documentation

react-fader

CircleCI Coverage Status semantic-release Commitizen friendly npm version

A React Component that fades out its old child, then fades in its new child when its children change. It can also optionally animate its height and/or width from one child's size to the other. Works well with react-router!

Usage

npm install --save react-fader
import React from 'react' import ReactDOM from 'react-dom' import Fader from 'react-fader'  ReactDOM.render(   <Fader>     <h3>Foo</h3>   </Fader>,   document.getElementById('root') )  // Just change its children to something !==, and it will perform a fade transition.  ReactDOM.render(   <Fader>     <h3>Bar</h3>   </Fader>,   document.getElementById('root') )

Transitioning between child routes with react-router version 4

While it can be done with <Switch>, I recommend using react-router-transition-switch instead:

import {Route, BrowserRouter as Router} from 'react-router-dom' import TransitionSwitch from 'react-router-transition-switch' import Fader from 'react-fader'  <Router>   <TransitionSwitch component={Fader}>     <Route path="/red" component={Red}/>     <Route path="/green" component={Green} />     <Route path="/blue" component={Blue} />   </TransitionSwitch> <Router>

Props

animateHeight: boolean (default: true)

If truthy, Fader will animate its height to match the height of its children.

animateWidth: boolean (default: true)

If truthy, Fader will animate its width to match the height of its children.

shouldTransition: (oldChildren: any, newChildren: any) => boolean (default: compares keys)

Allows you to determine whether Fader should perform a transition from oldChildren to newChildren. By default, it returns true if oldChildren !== newChildren or their keys are not equal.

fadeOutTransitionDuration: number (default: 200)

The duration of the fade out transition, in milliseconds.

fadeOutTransitionTimingFunction: string (default: 'ease')

The timing function for the fade out transition.

fadeInTransitionDuration: number (default: 200)

The duration of the fade in transition, in milliseconds.

fadeInTransitionTimingFunction: string (default: 'ease')

The timing function for the fade in transition.

sizeTransitionDuration: number (default: 200)

The duration of the size transition, in milliseconds.

sizeTransitionTimingFunction: string (default: 'ease')

The timing function for the size transition.

prefixer: Prefixer

If given, overrides the inline-style-prefixer used to autoprefix inline styles.

className: string

Any extra class names to add to the root element.

style: Object

Extra inline styles to add to the root element.

viewStyle: Object

Extra inline styles to add to the view wrapper elements.

innerViewWrapperStyle: Object

Extra inline styles to add to the inner div between the viewStyle div and your view content element. (The inner div was added to ensure perfect height animation.)


You May Also Like