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/
yarn add transition-switch
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 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"