misc_pterodactyl-panel/resources/scripts/TransitionRouter.tsx
2021-07-11 14:01:42 -06:00

32 lines
916 B
TypeScript

import React from 'react';
import { Route } from 'react-router';
import { SwitchTransition } from 'react-transition-group';
import Fade from '@/components/elements/Fade';
import styled from 'styled-components/macro';
import tw from 'twin.macro';
const StyledSwitchTransition = styled(SwitchTransition)`
${tw`relative`};
& section {
${tw`absolute w-full top-0 left-0`};
}
`;
const TransitionRouter: React.FC = ({ children }) => {
return (
<Route
render={({ location }) => (
<StyledSwitchTransition>
<Fade timeout={150} key={location.pathname + location.search} in appear unmountOnExit>
<section>
{children}
</section>
</Fade>
</StyledSwitchTransition>
)}
/>
);
};
export default TransitionRouter;