https://github.com/nanxiaobei/react-slide-routes
🏄♂️ The easiest way to slide React routes
https://github.com/nanxiaobei/react-slide-routes
animation motion react route router routes slide transition
Last synced: 2 months ago
JSON representation
🏄♂️ The easiest way to slide React routes
- Host: GitHub
- URL: https://github.com/nanxiaobei/react-slide-routes
- Owner: nanxiaobei
- License: mit
- Created: 2020-06-20T15:15:22.000Z (almost 5 years ago)
- Default Branch: main
- Last Pushed: 2025-02-20T13:59:22.000Z (4 months ago)
- Last Synced: 2025-04-12T23:38:18.951Z (2 months ago)
- Topics: animation, motion, react, route, router, routes, slide, transition
- Language: TypeScript
- Homepage:
- Size: 3.21 MB
- Stars: 98
- Watchers: 2
- Forks: 11
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
---
# react-slide-routes 🏄♂️
The easiest way to slide React routes
[](https://www.npmjs.com/package/react-slide-routes)
[](https://www.npmtrends.com/react-slide-routes)
[](https://bundlephobia.com/result?p=react-slide-routes)
[](https://github.com/facebook/react)
[](https://github.com/remix-run/react-router/tree/main/packages/react-router)
[](https://github.com/nanxiaobei/react-slide-routes/blob/main/LICENSE)---
## Fit
React Router v6
> For React Router v5, please use [`[email protected]`](https://github.com/nanxiaobei/react-slide-routes/blob/367ff0dfa94c9ff3234fc55493c27e3a53996ccd/README.md) and note that the usage is different.
## Add
```shell script
pnpm add react-slide-routes
# or
yarn add react-slide-routes
# or
npm i react-slide-routes
```## Use
```jsx
import { Route } from 'react-router-dom';
import SlideRoutes from 'react-slide-routes';const App = () => (
} />
} />
} />
);
```[](https://codesandbox.io/s/react-slide-routes-bnzlu?fontsize=14&hidenavigation=1&theme=dark)
## 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`](https://reactrouter.com/en/main/hooks/use-routes) |## License
[MIT License](https://github.com/nanxiaobei/react-slide-routes/blob/main/LICENSE) © [nanxiaobei](https://lee.so/)