react-slide-routes 🏄‍♂️

The easiest way to slide React routes

Fit

React Router v6

For React Router v5, please use react-slide-routes@1.1.0 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. 🌈