react-router-animated-switch
This module is an alternative to the react-router <Switch>
component. The
behaviour is identical, except that it includes a super slick animation to
transition between pages.
It adds two divs. An outer one, that wrapps all the pages, and an inner one for
each page. You can style them via style/className
and
itemStyle/itemClassName
respectively.
Installation
yarn add react-router-animated-switch
Usage
;;;;;;;;; const App = styledmain` display: flex; flex-direction: column; position: absolute; top: 0; left: 0; bottom: 0; right: 0;`;const Footer = stylednav` display: flex;`;const FooterLink = ` display: flex; align-items: center; justify-content: center; flex-grow: 1; text-decoration: none; color: white; height: 5em; background: black; :not(:last-child) { border-right: 1px solid lightgray; }`; const container = document;documentbody;ReactDOM;
Licence
MIT