delay-unmount v0.1.7
Delay Unmount
Usage
You can animate your React component while mounting and unmounting.
Example
CSS
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
If you are using it, your component will wrapped inside a div tag. ( It may cause speficity problems when you selecting your component through CSS ) . You can see the div tag when you inspect your component after it was mounted.
No problem There is a solution If you are not like to wrap inside a div tag.
There is custom hook named
useDelayUnmount.
This hook accepts two values
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.
Pass two props to you component
- show : the value you getting from the custom hook
- visible : Your dependancy value
Then take those props from your component
Next were are going to use our logic to implement the unmount animation
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.