react-router-animated 🏄‍♂️

The easiest way to animate React Router routes

Fit

React Router v6

Add

pnpm add react-router-animated
# or
yarn add react-router-animated
# or
npm i react-router-animated

Use

Basic Usage

import { Route } from 'react-router-dom';
import AnimatedRoutes from 'react-router-animated';

const App = () => (
  <AnimatedRoutes>
    <Route path="/" element={<Home />} />
    <Route path="/about" element={<About />} />
    <Route path="/contact" element={<Contact />} />
  </AnimatedRoutes>
);

Using AnimatedRoute for Per-Route Animations

import { Route } from 'react-router-dom';
import AnimatedRoutes from 'react-router-animated';
import { AnimatedRoute } from 'react-router-animated/AnimatedRoute';

const App = () => (
  <AnimatedRoutes>
    <Route path="/" element={<Home />} />
    <AnimatedRoute path="/about" element={<About />} animation="rotate" />
    <AnimatedRoute path="/contact" element={<Contact />} animation="vertical-slide" />
    <AnimatedRoute
      path="/dashboard"
      element={<Dashboard />}
      animation={{ forward: 'slide', back: 'rotate' }}
    />
    <AnimatedRoute
      path="/settings"
      element={<Settings />}
      animation={({ previousPath, previousRouteId }) =>
        previousRouteId === 'dashboard' ? 'none' : 'slide'
      }
    />
  </AnimatedRoutes>
);

API

AnimatedRoutes Props

| Prop | Type | Required | Default | Description | | ----------- | ---------- | -------- | --------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | animation | string | | 'slide' | Animation effect type, 'slide', 'vertical-slide', 'rotate', or 'none' | | 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 |

AnimatedRoute Props

The AnimatedRoute component accepts all the same props as React Router's Route component, plus:

| Prop | Type | Required | Description | | ----------- | --------------------------------------------- | -------- | ------------------------------------------------------------------------- | | animation | string \| object \| function | | Per-route animation configuration |

Animation Prop Types:

• String: 'slide' | 'vertical-slide' | 'rotate' | 'none'

  • Applies the same animation for both forward and backward navigation

• Object: { forward?: AnimationType, back?: AnimationType }

  • Specify different animations for forward and backward navigation

• Function: ({ previousPath, previousRouteId }) => AnimationType | AnimationObject

  • Dynamic animation based on the previous route
  • previousPath: The path of the previous route
  • previousRouteId: The ID of the previous route
  • Returns either a string animation type or an object with forward/back animations

License

MIT License © Tommy