Skip to content

πŸ„β€β™‚οΈ The easiest way to slide React routes

License

Notifications You must be signed in to change notification settings

nanxiaobei/react-slide-routes

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

kee.so

Create now ➫ πŸ”— kee.so


react-slide-routes πŸ„β€β™‚οΈ

The easiest way to slide React routes

npm npm npm bundle size npm peer dependency version npm peer dependency version GitHub


live

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

Edit react-slide-routes

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