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>
    <Route path="/green" component={Green} ></Route>
    <Route path="/blue" component={Blue} ></Route>
  </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.)