1.0.3 • Published 3 years ago
@thenumber/react-slide-routes v1.0.3
react-slide-routes
The easiest way to slide React routes This is a fork of React Slide Routes. Functionality has been added to enable nested slide routes.
Fit
react-router version >=4.0.0 and <6.0.0
Add
yarn add react-slide-routes
# or
npm install react-slide-routesUse
import SlideRoutes from '@thenumber/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>
);
};Animation Key
TODO: Write explanation of animationKey.
Live
API
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
location | object | yes | location | location from react-router-dom, required |
animation | string | 'slide' | Animation effect type, 'slide', 'vertical-slide', or 'rotate' | |
pathList | array | [] | Pre-defined pathname list, useful when enter a url, you want to "back" to some url (default "forward") | |
duration | number | 200 | transition-duration in ms | |
timing | string | 'ease' | transition-timing-function, one of 'ease' 'ease-in' 'ease-out' 'ease-in-out' 'linear' | |
animationKey | string | Passing a key will prevent animation when moving between routes. | ||
destroy | boolean | true | If false, the passed page will still exits in dom, only invisible |