React-slide-routes NPM

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 → 🤳

live

API

Prop	Type	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`