Slide Transition Between Routes With react-slide-routes

Category: Animation , React
Author: nanxiaobei
Views Total: 8 views
Official Page: Go to website
Publish Date: June 22, 2020
License: MIT

An easy to use React component to slide between React routes. Works with React Router 4+.

How to use it:

1. Install & import the react-slide-routes.

# Yarn
$ yarn add react-slide-routes

# NPM
$ npm install react-slide-routes --save
import SlideRoutes from 'react-slide-routes';
import { Route, useLocation } from 'react-router-dom';

2. An example app showing how to slide routes in your React application.

const App = () => {
  const location = useLocation();
  return (
    <>
      <SlideRoutes location={location}>
        <Route path="/" render={Home} exact />
        <Route path="/category" render={Category} />
        <Route path="/about" render={About} />
      </SlideRoutes>
    </>
  );
};

Preview:

Slide Transition Between Routes With react-slide-routes

You Might Be Interested In:

Leave a Reply