react-router-transition-lirsoft v2.1.1-7.1

React Router Transition

Painless transitions for React Router, powered by React Motion. Example site.

Clone to support React 17.x

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 react-router-transition react-router-dom

Example Usage

import { BrowserRouter as Router, Route } from 'react-router-dom';
import { AnimatedSwitch } from '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

• AnimatedSwitch
• AnimatedRoute

Limitations

This library has some obvious limitations, the most marked of which are:

• no staggering or sequencing of animations
• no durations or timing functions