react-fader
v3.2.0
Published
component that fades out old children, then fades in new children when its children change
Downloads
1,623
Maintainers
Readme
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.)