react-slide-routes 🏄♂️
The easiest way to slide React routesFit
React Router v6For React Router v5, please use react-slide-routes@1.1.0
and note that the usage is different.
Add
```shell script yarn add react-slide-routesor
npm i react-slide-routes
## Use
```jsx
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>
);
Live
Play a live demo here → 🤳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
|