{"repo":"Steveeeie/react-page-transition","free":true,"listed":false,"github":"https://github.com/Steveeeie/react-page-transition","clone":"git clone https://github.com/Steveeeie/react-page-transition.git","description":"A React component that makes it easy to use the page transitions from the Codedrops page transitions demo with React","language":"TypeScript","stars":447,"topics":["react","page-transitions","transitions","animation","react-transition-group","react-router","styled-components"],"license":"MIT","category":"ui-components","readme_excerpt":"IMPORTANT: This project doesn't support newer versions of React or React Router and is for now considered abandoned. Please see: https://github.com/Steveeeie/react-page-transition/issues/33 React Page Transition ⚛️💨 A React component that makes it easy to use the page transitions from the Codedrops Page Transitions Demo See Original. View Basic Demo View Advanced Demo View TypeScript Demo --- --- Usage with react-router 1. Install Package npm install @steveeeie/react-page-transition or yarn add @steveeeie/react-page-transition --- 2. Install Dependencies npm install react-router react-router-dom react-transition-group styled-components or yarn add react-router react-router-dom react-transition-group styled-components --- 3. Code Example App.js Wrap your routes inside the PageTransition component and pass one of the preset names to the preset prop. View the advanced demo for the full list of presets. You will also need to pass the current location.path to the transitionKey prop, this is so that the internal TransitionGroup can track which components are entering and exiting. --- styles.css PageTransition is styled with height: 100% . The parent containers need to be given a height for it to render correctly because of this. --- Props Prop Required Type Description ---------------- -------- ----------------- ------------------------------------------------------------------- preset No String Sets the enter and exit animations \\ enterAnimation No String Sets the enter animation","default_branch":null,"files":null,"tree":[],"storefront":"/r/Steveeeie","claimed":false,"request_supported":{"post":"https://gitbuyer.com/r/Steveeeie/react-page-transition/request-supported","requests":0},"note":"indexed from public GitHub; nothing is for sale on this page. Clone it from GitHub. Paid listings live at /search."}