Delay Unmount
Usage
You can animate your React component while mounting and unmounting.
Example
import { useState } from "react";
import Delay from "delay-unmount";
import YourComponent from "./YourComponent";
function App() {
const [visible, setVisible] = useState(false);
return (
<div className="App">
<button onClick={() => setVisible((old) => !old)}>Toggle Mount</button>
<Delay
component={YourComponent}
dependancy={visible}
delay="1000"
mount="mount"
unmount="unmount"
/>
</div>
);
}
export default App;
CSS
.unmount {
animation: outAnimation 1000ms ease-out;
}
@keyframes outAnimation {
0% {
scale: 1;
opacity: 1;
}
100% {
scale: 0;
opacity: 0;
}
}
.mount {
animation: inAnimation 600ms ease-in;
}
@keyframes inAnimation {
0% {
scale: 0;
opacity: 0;
}
100% {
scale: 1;
opacity: 1;
}
}
How it will work
We should assign a classname to the given component ( Delay ) and style it using css ( Animations ) . To assign the classname you should use the unmount and mount props.
How to use
You will get a component named Delay.
It will accept 4 props ( Each prop should be in the same name )
component - The React component which you need the delay effect( Animation )
dependancy - Show or hide the component
( data-type : boolean )delay - delayTime which you time
(in milliseconds)unmount - This should be a
class name, which you can add style to it using css. The style or animation apply to this class will worked when your React component is unmounting.mount - This should be a
class name, which you can add style to it using css. The style or animation apply to this class will worked when your React component is mounting.
Features
Animating components while mounting and unmounting
You can use different unmount and mount animations for different components ( Because each component can have a specific className )
If you are a performance guy
For the mounting and unmounting process it will take only 4 rerenders except the initial render.
If the parent component rerenders This component won't be rerendered ( memoized ).
NOTE
No problem There is a solution If you are not like to wrap inside a div tag.
There is custom hook named
useDelayUnmount.
import { useDelayUnmount } from "delay-unmount"
This hook accepts two values
const show = useDelayUnmount( visible , 300)
dependancy - Show or hide the component
( data-type : boolean )delay - DelayTime which you time
(in milliseconds)
It will return a boolean value ( true or false ). Now you can use it to apply the logic to the component.
{ show && < YourComponent /> }
Pass two props to you component
show && < YourComponent show={show} visible={visible} />- show : the value you getting from the custom hook
- visible : Your dependancy value
Then take those props from your component
function YourComponent({show , visible}){ return( <div> Hi friends </div> ) }
Next were are going to use our logic to implement the unmount animation
function YourComponent({ show, visible }) { return ( <div className={`default ${show && !visible ? "unmount" : "mount"}`} > Hi friends </div> ); }Here we are assigning a classname to the parent element of the component, the unmount classname will only available when unmounting the Component
- default - Your default classnames
- unmount - class name that that you want animate while unmounting
- mount - class name that that you want animate while mounting
Now you can add the animation or style you needed when unmounting the component through your css file by selecting the classname that you gave.