Transition Switch

This package replaces react-router 5's <Switch> component and enables scroll-to-top functionality and route transition animations using React Transition Group and Animate.js.

Inspired by react-router-transitions

Demo available here: https://canfie1d.github.io/transition-switch/

Installation

yarn add transition-switch

Usage

import { useRef } from 'react';
import { TransitionSwitch } from 'transition-switch';

const ref = useRef(null);

<TransitionSwitch ref={ref}>
  <Route />
  <Route />
</TransitionSwitch>

You can also use the ScrollToTop component independently which will initiate a scroll on any route change (requires location prop from react-router).

import { ScrollToTop } from './TransitionSwitch';
import { useLocation } from 'react-router-dom';

const location = useLocation();
<ScrollToTop location={location} />

Props

Props marked with an asterisk also exist on ScrollToTop as well

• transition

  Controls the animation type

  default: 'fade'

  available: 'fade', 'fade-up', 'fade-down'

• timeout

  Controls the animation duration

  default: {enter: 500, exit: 500 }

• scrollToTop

  Toggles whether your scroll position is preserved on route change

  default: true

• scrollTopOffset*

  Controls scrollToTop's final position

  default: { x: 0, y: 0 }

• scrollTopDelay*

  Defines when the scrollToTop occurs during the route animation

  default: 250

• scrollContainer*

  If your layout locks the body and scrolls another element, you can change the scroll container target for scrollToTop

  default: window

• animatedDivClassName

  Optionally pass a class name to the div that is animated

  default: "animatedRouteWrapper"

License

MIT