-
-
Save minhlucvan/ce639af45fc434f443a8996f998b08c2 to your computer and use it in GitHub Desktop.
Example of how to use React TransitionGroup and react-router
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| module.exports = React.createClass({ | |
| componentWillEnter(cb) { | |
| doSomeAsyncAnimationStuff(function() { | |
| cb(); | |
| }); | |
| }, | |
| componentDidEnter() { | |
| // Called after cb arg from componentWillEnter is called | |
| }, | |
| componentWillLeave(cb) { | |
| doSomeAsyncAnimationStuff(function() { | |
| // Call the callback when your done or this component will never unmount | |
| // and your app will break | |
| cb(); | |
| }); | |
| }, | |
| componentDidLeave() { | |
| // Called after cb arg from componentWillLeave is called | |
| // The component will be unmounted but you can clean things up here | |
| }, | |
| render: function() { | |
| return ( | |
| <div>Hey now</div> | |
| ); | |
| } | |
| }); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| const TransitionRouter = require('TransitionRouter.js'); | |
| const HandlerA = require('HandlerA.js'); | |
| const HandlerB = require('HandlerB.js'); | |
| const routes = ( | |
| <Route handler={TransitionRouter}> | |
| <Route name="a" handler={HandlerA}}> | |
| <Route name="b" handler={HandlerB}}> | |
| </Route> | |
| ); | |
| Router.run(routes, Router.HistoryLocation, function(Handler, state) { | |
| React.render(<Handler />, document.getElementById("app")); | |
| }); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var TransitionGroup = React.addons.TransitionGroup; | |
| var {RouteHandlerMixin, State} = require("react-router"); | |
| module.exports = React.createClass({ | |
| mixins: [ RouteHandlerMixin, State ], | |
| getHandlerKey: function() { | |
| return this.getRoutes().reverse()[0].name; | |
| }, | |
| render: function() { | |
| var key = this.getHandlerKey(); | |
| return( | |
| <TransitionGroup> | |
| {this.createChildRouteHandler({key: key})} | |
| </TransitionGroup> | |
| ); | |
| } | |
| }); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment