slider

The easiest way to slide React routes

Jun 28, 2020
The easiest way to slide React routes

react-slide-routes

The easiest way to slide React routes.

View Demo View Github

Fit

react-router version >=4.0.0 and <6.0.0

Add

yarn add react-slide-routes # or npm install react-slide-routes

Use

import SlideRoutes from 'react-slide-routes'; import { Route, useLocation } from 'react-router-dom'; const App = () => { const location = useLocation(); return ( <> <SlideRoutes location={location}> <Route path="/" component={Home} exact /> <Route path="/about" component={About} /> <Route path="/contact" component={Contact} /> </SlideRoutes> </> ); }; // If the wrapper of component is <React.Fragment>, only the :first-child will have animation: // const Home = () => (<> <h1>Title</h1> <div>Content</div> </>); ← only <h1> have animation

live

API

PropTypeRequiredDefaultDescription
locationobjectyeslocationlocation from react-router-dom, required
durationnumber200transition-duration in milliseconds
effectstring'ease'transition-timing-function, one of 'ease' 'ease-in' 'ease-out' 'ease-in-out' 'linear'
destroybooleantrueIf false, the passed page will still exits in dom, only invisible

CSS

All css rules for slide effect, can be useful for customization:

/* back */ .back-enter { transform: translateX(-100%); } .back-enter-active { transform: translateX(0); } .back-exit { transform: translateX(0); } .back-exit-active { transform: translate(100%); } /* next */ .next-enter { transform: translateX(100%); } .next-enter-active { transform: translateX(0); } .next-exit { transform: translateX(0); } .next-exit-active { transform: translateX(-100%); }

GitHub

Recommended