Skip to content

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

canfie1d/transition-switch

main
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 

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.

NPM Version

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

About

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

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published