Create now ➫ 🔗 kee.so
The easiest way to slide React routes
React Router v6
For React Router v5, please use
react-slide-routes@1.1.0and note that the usage is different.
pnpm add react-slide-routes
# or
yarn add react-slide-routes
# or
npm i react-slide-routesimport { Route } from 'react-router-dom';
import SlideRoutes from 'react-slide-routes';
const App = () => (
<SlideRoutes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
<Route path="/contact" element={<Contact />} />
</SlideRoutes>
);
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
animation |
string |
'slide' |
Animation effect type, 'slide', 'vertical-slide', or 'rotate' |
|
duration |
number |
200 |
transition-duration in ms |
|
timing |
string |
'ease' |
transition-timing-function, one of 'ease' 'ease-in' 'ease-out' 'ease-in-out' 'linear' |
|
destroy |
boolean |
true |
If false, prev page will still exits in dom, just invisible |
|
compare |
function |
- | Function to sort the routes' order (defaults to the definition order). compare will be used to routes.sort((a, b) => compare(a, b)), routes is the param to useRoutes |