2.2.0 • Published 3 years ago
re.d.react-router-transition v2.2.0
React Router Transition
Painless transitions for React Router, powered by React Motion. Example site.
Requirements
To use the latest version of this package (2.x
), you'll need to use a version
of React compatible with hooks, as well as version 5.x
of react-router-dom
.
Installation
npm install --save re.d.react-router-transition react-router-dom
Example Usage
import { BrowserRouter as Router, Route } from 'react-router-dom';
import { AnimatedSwitch } from 're.d.react-router-transition';
export default () => (
<Router>
<AnimatedSwitch
atEnter={{ opacity: 0 }}
atLeave={{ opacity: 0 }}
atActive={{ opacity: 1 }}
className="switch-wrapper"
>
<Route exact path="/" component={Home} />
<Route path="/about/" component={About}/>
<Route path="/etc/" component={Etc}/>
</AnimatedSwitch>
</Router>
)
.switch-wrapper {
position: relative;
}
.switch-wrapper > div {
position: absolute;
}
Docs
Limitations
This library has some obvious limitations, the most marked of which are:
- no staggering or sequencing of animations
- no durations or timing functions
2.2.0
3 years ago