react-slide-routes's Introduction

react-slide-routes 🏄‍♂️

The easiest way to slide React routes

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

// If the wrapper of component is <React.Fragment>, only the :first-child will have animation:
// const Home = () => (<> <h1>Title</h1> <div>Content</div> </>);  ← only <h1> have animation

Live

Play a live demo here → 🤳

API

Prop	Type	Required	Default	Description
`location`	`object`	yes	`location`	`location` from `react-router-dom`, required
`duration`	`number`		`200`	`transition-duration` in milliseconds
`effect`	`string`		`'ease'`	`transition-timing-function`, one of `'ease'` `'ease-in'` `'ease-out'` `'ease-in-out'` `'linear'`
`destroy`	`boolean`		`true`	If `false`, the passed page will still exits in dom, only invisible

CSS

All css rules for slide effect, can be useful for customization:

/* back */
.back-enter {
  transform: translateX(-100%);
}
.back-enter-active {
  transform: translateX(0);
}
.back-exit {
  transform: translateX(0);
}
.back-exit-active {
  transform: translate(100%);
}

/* next */
.next-enter {
  transform: translateX(100%);
}
.next-enter-active {
  transform: translateX(0);
}
.next-exit {
  transform: translateX(0);
}
.next-exit-active {
  transform: translateX(-100%);
}