React Slide Routes Save
🏄♂️ The easiest way to slide React routes
Project README
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
Open Source Agenda is not affiliated with "React Slide Routes" Project. README Source: nanxiaobei/react-slide-routes
Stars
89
Open Issues
0
Last Commit
3 months ago
Repository
License
Open Source Agenda Badge
