JarCasting
JarCasting JarCasting

react-router-transition

WebJar for react-router-transition

License

License

MIT
Categories

Categories

React User Interface Web Frameworks
GroupId

GroupId

org.webjars.npm
ArtifactId

ArtifactId

react-router-transition
Last Version

Last Version

1.1.1
Release Date

Release Date
Type

Type

jar
Description

Description

react-router-transition
WebJar for react-router-transition
Project URL

Project URL

http://webjars.org
Source Code Management

Source Code Management

https://github.com/maisano/react-router-transition

Download react-router-transition

Filename Size
react-router-transition-1.1.1.pom
react-router-transition-1.1.1.jar 92 KB
react-router-transition-1.1.1-sources.jar 22 bytes
react-router-transition-1.1.1-javadoc.jar 22 bytes
Browse

How to add to project

<!-- https://jarcasting.com/artifacts/org.webjars.npm/react-router-transition/ -->
<dependency>
    <groupId>org.webjars.npm</groupId>
    <artifactId>react-router-transition</artifactId>
    <version>1.1.1</version>
</dependency>
// https://jarcasting.com/artifacts/org.webjars.npm/react-router-transition/
implementation 'org.webjars.npm:react-router-transition:1.1.1'
// https://jarcasting.com/artifacts/org.webjars.npm/react-router-transition/
implementation ("org.webjars.npm:react-router-transition:1.1.1")
'org.webjars.npm:react-router-transition:jar:1.1.1'
<dependency org="org.webjars.npm" name="react-router-transition" rev="1.1.1">
  <artifact name="react-router-transition" type="jar" />
</dependency>
@Grapes(
@Grab(group='org.webjars.npm', module='react-router-transition', version='1.1.1')
)
libraryDependencies += "org.webjars.npm" % "react-router-transition" % "1.1.1"
[org.webjars.npm/react-router-transition "1.1.1"]

Dependencies

compile (5)

Group / Artifact Type Version
org.webjars.npm : react-dom jar [15.6.1,16)
org.webjars.npm : react-motion jar [0.5.0,0.6)
org.webjars.npm : react jar [15.6.1,16)
org.webjars.npm : prop-types jar [15.5.10,16)
org.webjars.npm : react-router-dom jar [4.1.1,5)

Project Modules

There are no modules declared in this project.

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

Versions

Version
1.1.1