rsr

react-slide-routes

🏄‍♂️ The easiest way to slide React routes

Showing:

Popularity

Downloads/wk

299

GitHub Stars

29

Maintenance

Last Commit

1mo ago

Contributors

2

Package

Dependencies

2

License

MIT

Type Definitions

Tree-Shakeable

Yes?

Categories

Readme

react-slide-routes 🏄‍♂️

The easiest way to slide React routes

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

Fit

react-router version >=4.0.0 and <6.0.0

Add

yarn add react-slide-routes

# or

npm install react-slide-routes

Use

import SlideRoutes from 'react-slide-routes';
import { Route, useLocation } from 'react-router-dom';

const App = () => {
  const location = useLocation();
  return (
    <SlideRoutes location={location}>
      <Route path="/" component={Home} exact />
      <Route path="/about" component={About} />
      <Route path="/contact" component={Contact} />
    </SlideRoutes>
  );
};

Live

Play a live demo here → 🤳

live

API

PropTypeRequiredDefaultDescription
locationobjectyeslocationlocation from react-router-dom, required
animationstring'slide'Animation effect type, 'slide', 'vertical-slide', or 'rotate'
pathListarray[]Pre-defined pathname list, useful when enter a url, you want to "back" to some url (default "forward")
durationnumber200transition-duration in ms
timingstring'ease'transition-timing-function, one of 'ease' 'ease-in' 'ease-out' 'ease-in-out' 'linear'
destroybooleantrueIf false, the passed page will still exits in dom, only invisible

License

MIT License © nanxiaobei

Pitiless Ads

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

FUTAKE

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100