Create now ➫ 🔗 kee.so

---

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

pnpm add react-slide-routes
# or
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>
);

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