AnimateSwitch

This component extends Switch component of react-router-dom and provides additionnal props for animating contained routes.

Use animationType prop to do basic animations:

• fade (default)
• scale
• slide up
• slide down
• slide left
• slide right

If your not satisfied with these animations, you can do your own animation with some framer-motion imported props (inherited from MountTransition). See below.

Example

import { AnimateSwitch, AnimateRoute } from 'la-danze-ui';

function App() {

return (

...

<AnimateSwitch animationType="slideLeft">

// AnimateSwitch can only be used with AnimateRoute

<AnimateRoute path="/example">example</AnimateRoute>

...

</AnimatedSwitch>

);

}

Props

Extends Switch props

Additional props:

Name	Type	Default	Required	Description
animationType	'fade' |'scale' |'slideUp' |'slideDown' |'slideLeft' |'slideRight'	'fade'	No	Animation type of all contained routes. Overrides variants prop. Overriden by AnimateRoute animationType prop.
animationKey	AnimationKey		No	Override key prop. Use it only if you have nested routes. It will prevent parent route to re render.
initial	Target |VariantLabels |boolean	'initial'	No	See framer-motion doc.
animate	AnimationControls |TargetAndTransition |VariantLabels |boolean	'in'	No	See framer-motion doc.
exit	TargetAndTransition | VariantLabels	'out'	No	See framer-motion doc.
transition	Transition	{ duration: 0.225 }	No	See framer-motion doc.
variants	Variants		No	See framer-motion doc.
style	MotionStyle		No	See framer-motion doc.