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

        




Create now ➫ [🔗 kee.so](https://kee.so/)



---

# react-slide-routes 🏄‍♂️

The easiest way to slide React routes

[![npm](https://img.shields.io/npm/v/react-slide-routes.svg?style=flat-square)](https://www.npmjs.com/package/react-slide-routes)

[![npm](https://img.shields.io/npm/dt/react-slide-routes?style=flat-square)](https://www.npmtrends.com/react-slide-routes)

[![npm bundle size](https://img.shields.io/bundlephobia/minzip/react-slide-routes?style=flat-square)](https://bundlephobia.com/result?p=react-slide-routes)

[![npm peer dependency version](https://img.shields.io/npm/dependency-version/react-slide-routes/peer/react?style=flat-square)](https://github.com/facebook/react)

[![npm peer dependency version](https://img.shields.io/npm/dependency-version/react-slide-routes/peer/react-router?style=flat-square)](https://github.com/remix-run/react-router/tree/main/packages/react-router)

[![GitHub](https://img.shields.io/github/license/nanxiaobei/react-slide-routes?style=flat-square)](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 = () => (

  

    } />

    } />

    } />

  

);

```

[![Edit react-slide-routes](https://codesandbox.io/static/img/play-codesandbox.svg)](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/)