react-router-transition

WebJar for react-router-transition

License	MIT
Categories	React User Interface Web Frameworks
GroupId	org.webjars.npm
ArtifactId	react-router-transition
Last Version	1.1.1
Release Date	Oct 20, 2017
Type	jar
Description	react-router-transition WebJar for react-router-transition
Project URL	http://webjars.org
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

How to add to project

Apache Maven

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

Gradle Groovy

// https://jarcasting.com/artifacts/org.webjars.npm/react-router-transition/
implementation 'org.webjars.npm:react-router-transition:1.1.1'

Gradle Kotlin

// https://jarcasting.com/artifacts/org.webjars.npm/react-router-transition/
implementation ("org.webjars.npm:react-router-transition:1.1.1")

Apache Buildr

'org.webjars.npm:react-router-transition:jar:1.1.1'

Apache Ivy

<dependency org="org.webjars.npm" name="react-router-transition" rev="1.1.1">
  <artifact name="react-router-transition" type="jar" />
</dependency>

Groovy Grape

@Grapes(
@Grab(group='org.webjars.npm', module='react-router-transition', version='1.1.1')
)

Scala SBT

libraryDependencies += "org.webjars.npm" % "react-router-transition" % "1.1.1"

Leiningen

[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

• 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

Versions

Version
1.1.1 Oct 20, 2017