react-fader

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.)