Popularity
7.7
Growing
Activity
1.7
-
2,442
24
131

Monthly Downloads: 0
Programming language: JavaScript
License: MIT License
Latest version: v2.0.0

react-router-transition alternatives and similar libraries

Based on the "UI Animation" category.
Alternatively, view react-router-transition alternatives based on common mentions on social networks and blogs.

Do you think we are missing an alternative of react-router-transition or a related project?

Add another 'UI Animation' Library

Popular Comparisons

SaaSHub - Software Alternatives and Reviews
Sponsored www.saashub.com

README

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

Limitations

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

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