react-slide-routes
🏄♂️ The easiest way to slide React routes
MIT License
Ecosystems:
React,
Framer Motion
Create now ➫ 🔗 kee.so
react-slide-routes 🏄♂️
The easiest way to slide React routes
Fit
React Router v6
For React Router v5, please use
[email protected]and note that the usage is different.
Add
pnpm add react-slide-routes
# or
yarn add react-slide-routes
# or
npm i react-slide-routes
Use
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>
);
API
| 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
|
License
Package Rankings
Top 4.4% on Npmjs.org
Badges
Extracted from project README
