https://github.com/strml/react-router-component-transition
Example code for router which does animated page transitions using ReactCSSTranstionGroup
https://github.com/strml/react-router-component-transition
Last synced: 5 months ago
JSON representation
Example code for router which does animated page transitions using ReactCSSTranstionGroup
- Host: GitHub
- URL: https://github.com/strml/react-router-component-transition
- Owner: STRML
- Created: 2014-02-23T11:58:22.000Z (about 12 years ago)
- Default Branch: master
- Last Pushed: 2018-02-13T15:46:58.000Z (about 8 years ago)
- Last Synced: 2025-04-06T21:11:48.140Z (12 months ago)
- Language: JavaScript
- Homepage: http://strml.github.io/react-router-component-transition/
- Size: 188 KB
- Stars: 244
- Watchers: 6
- Forks: 17
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
### React-Router-Component-Transition
A simple component that overrides `` in [React-Router-Component](https://github.com/STRML/react-router-component)
to animate page transitions.
[View the Demo](https://strml.github.io/react-router-component-transition/)
#### Install
```
npm install react-router-component-transition
```
```javascript
var AnimatedLocations = require('react-router-component-transition');
```
#### Usage
Simply replace any usage of `` in your app with ``.
View [the source](index.js) for more details and comments.
You can also change the transition used on a particular link by using the prop `transitionName`, or shut off
transitions entirely by using the prop `noTransition`.
View the [demo source](demo.js) for more usage details.
#### Development
To run the demo locally and tinker:
% git clone https://github.com/strml/react-router-page-transition.git
% npm install
% npm run develop
% open index.html