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

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>
);

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 |

License

MIT License © nanxiaobei

FUTAKE

If you use WeChat, please try "FUTAKE". It's a WeChat mini app for your inspiration moments. 🌈