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

• 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.

• 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.

Some times It may be confusing for you, You can refer this github Repo to get the example code.

Live example site.

You can contact me through

• LinkedIn
• Twitter

Thank you