{"id":16765596,"url":"https://github.com/aboeglin/react-router-v4-transition","last_synced_at":"2025-03-21T23:33:21.258Z","repository":{"id":57343901,"uuid":"96574059","full_name":"aboeglin/react-router-v4-transition","owner":"aboeglin","description":"React Router V4 Transition","archived":false,"fork":false,"pushed_at":"2018-09-11T18:06:10.000Z","size":219,"stargazers_count":39,"open_issues_count":4,"forks_count":9,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-10-14T05:43:07.311Z","etag":null,"topics":["react","react-router-v4","transition"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/aboeglin.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-07-07T20:24:20.000Z","updated_at":"2023-07-01T10:30:45.000Z","dependencies_parsed_at":"2022-09-12T06:30:46.336Z","dependency_job_id":null,"html_url":"https://github.com/aboeglin/react-router-v4-transition","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aboeglin%2Freact-router-v4-transition","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aboeglin%2Freact-router-v4-transition/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aboeglin%2Freact-router-v4-transition/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aboeglin%2Freact-router-v4-transition/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/aboeglin","download_url":"https://codeload.github.com/aboeglin/react-router-v4-transition/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":221820601,"owners_count":16886222,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["react","react-router-v4","transition"],"created_at":"2024-10-13T05:43:01.409Z","updated_at":"2024-10-28T11:15:02.967Z","avatar_url":"https://github.com/aboeglin.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Router Transition\r\n[![Build Status](https://travis-ci.org/aboeglin/react-router-v4-transition.png?branch=master)](https://travis-ci.org/aboeglin/react-router-v4-transition) [![Coverage Status](https://coveralls.io/repos/github/aboeglin/react-router-v4-transition/badge.svg?branch=master)](https://coveralls.io/github/aboeglin/react-router-v4-transition?branch=master) [![npm version](https://badge.fury.io/js/react-router-v4-transition.svg)](https://badge.fury.io/js/react-router-v4-transition)\r\n\r\nTransitions for React Router v4. The API is composed of a component, TransitionSwitch, that should be used as the Switch\r\ncomponent from react-router v4 to switch from a route to another one with a transition. That transition can be any action\r\nyou need to do between routes, like animation, or fetching data.\r\n\r\n## API Description\r\n\r\n### 1) The component:\r\n```javascript\r\n\u003cTransitionSwitch parallel={false}\u003e\r\n    \u003cRoute exact path=\"/\"\u003e\r\n        \u003cTransition\u003ehome path\u003c/Transition\u003e\r\n    \u003c/Route\u003e\r\n    \u003cRoute path=\"/otherPath\"\u003e\r\n        \u003cTransition\u003eother path\u003c/Transition\u003e\r\n    \u003c/Route\u003e\r\n    \u003cRoute path=\"/\"\u003e\r\n        \u003cTransition\u003eother home\u003c/Transition\u003e\r\n    \u003c/Route\u003e\r\n    \u003cRoute path=\"/anotherPath\"\u003e\r\n        \u003cTransition\u003eanother path\u003c/Transition\u003e\r\n    \u003c/Route\u003e\r\n\u003c/TransitionSwitch\u003e\r\n```\r\n\r\nTransitionSwitch allows you to perform transitions on route change. Given its name, it works like the router v4 Switch. It\r\nmeans that only one route will be visible at all times. Except if parallel is set to true, which means that the entering\r\ntransition won't wait for the leaving transition to be finished.\r\nNB: parallel may be renamed in the future.\r\n\r\n### 2) The transitions:\r\nLike a switch, the children must be Route elements. The children of these route elements will be given hooks to perform\r\nthe transition. These hooks are :\r\n\r\n```javascript\r\nclass Transition extends React.Component {\r\n    \r\n    componentWillAppear(callback) {\r\n        //do something when the component will appear\r\n        \r\n        callback();\r\n    }\r\n    \r\n    componentDidAppear() {\r\n        //do something when the component appeared\r\n    }\r\n    \r\n    componentWillEnter(callback) {\r\n        //do something when the component will enter\r\n        \r\n        callback();\r\n    }\r\n    \r\n    componentDidEnter() {\r\n        //do something when the component entered\r\n    }\r\n    \r\n    componentWillLeave(callback) {\r\n        //do something when the component will leave\r\n                \r\n        callback();\r\n    }\r\n    \r\n    componentDidLeave() {\r\n        //do something when the component has left    \r\n    }\r\n    \r\n}\r\n\r\n```\r\nThe callbacks must be called after the transition is complete, in the case of animation, a good place is in the\r\ncallback provided by the animation library. The interface is very much the same as react-trasition-group v1.\r\nThis means that componentWillAppear is called for the first time when the TransitionSwitch is mounted.\r\n\r\n## Sample App\r\n\r\nIn case you want to quickly try it, there's a webpack setup and very rough sample app. \r\nIn order to build it you should run :\r\n```\r\nnpm run build:example\r\nnpm run start:server\r\n```\r\nThe app will be running at localhost:8080, the build command watches for changes in case you want to play with it, the\r\nsources are located in src/example.\r\n\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faboeglin%2Freact-router-v4-transition","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Faboeglin%2Freact-router-v4-transition","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faboeglin%2Freact-router-v4-transition/lists"}