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.0
and note that the usage is different.
pnpm add react-slide-routes
# or
yarn add react-slide-routes
# or
npm i react-slide-routes
import { 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 |