One of the things that I have neglected the most as a React programmer when it comes to animations is the transitions when mounting and unmounting a component. Normally I alwaysleft without animations because I didn't see an easy and comfortable way to put them either. The result is quite forced and the experience for the user is that things appear and disappear by magic, nothing fluid.

Until a couple of days ago I decided to investigate the best and simplest way to run animations when mounting and unmounting components. I came to the conclusion that the best thing was tocreate a generic component that allows mounting and unmounting components through the simplest possible syntax.

I started creating a component that would manage the animation of the component and take care of mounting and unmounting it when indicated. The animation had to be done using theCSS keyframes, so I came up with a solution like this simple example:

Instead of this (mount/unmount without animation):

constMyComponent=()=>{const[isMounted,setIsMounted]=useState(false);...return(<>{isMounted&&(<div>          Hi World!</div>)}</>)...

We do this (same with animation):

importAnimatedfrom"react-mount-animation";constMyComponent=()=>{const[isMounted,setIsMounted]=useState(false);...return(<Animated.div//You can use any HTML element hereshow={isMounted}mountAnim={`             0% {opacity: 0}            100% {opacity: 1}        `}>        Hi World!</Animated.div>)...

Anyone who wants to collaborate on it can contact me and any technical or non-technical opinion I will receive with pleasure. Maybe this package does not make sense, maybe it does, in any case I would love for you to leave a comment.

If you want toinspect the code or simplytest it, you can do it by consulting the repository:https://github.com/mijim/react-mount-animation

https://www.npmjs.com/package/react-mount-animation

Thanks & Happy Coding! ⚡️