transition-switch
v1.0.1
Published
React Router 5 Switch Replacement that adds animations and scroll to top.
Downloads
3
Readme
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 { TransitionSwitch } from 'transition-switch'';
<TransitionSwitch>
<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"