# delay-unmount > A simple component and hook to create unmount and mount animations in reactjs Latest version **0.1.7** (published 2022-11-10) · MIT license · 0 weekly downloads ## Install ```sh npm install delay-unmount pnpm add delay-unmount yarn add delay-unmount bun add delay-unmount ``` ## Health **Score 15/100 (F)** — status: abandoned. Positive: no vulnerabilities. Warnings: low downloads; no types; no esm support; pre 1.0. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 0.1.7 | | Published | 2022-11-10 | | First published | 2022-11-10 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | none | | Module format | CommonJS | | Dependencies | 0 | | Unpacked size | 11.5 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 0 | | Author | Althaf Ahamed | | Maintainers | althaf_ahd | | Keywords | react, delay-unmount, useDelayUnmount, unmount animation, unmount transition, show transition, unmount, transition hide, delayed unmount, css animation, use delayed unmount, animation | ## Links - npm: https://www.npmjs.com/package/delay-unmount - Repository: https://github.com/AlthafAhd07/delay-unmount - Homepage: https://delay-unmount.netlify.app/ - Issues: https://github.com/AlthafAhd07/delay-unmount/issues - npm.io page: https://npm.io/package/delay-unmount ## Alternatives - [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads - [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads - [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads - [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads - [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads ## Recent versions - 0.1.7 (latest) — 2022-11-10 - 0.1.6 — 2022-11-10 - 0.1.5 — 2022-11-10 - 0.1.4 — 2022-11-10 - 0.1.3 — 2022-11-10 - 0.1.2 — 2022-11-10 - 0.1.1 — 2022-11-10 - 0.1.0 — 2022-11-10 ## README # 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](https://github.com/AlthafAhd07/delay-unmount-demo) to get the example code.
## Live example [site](https://delay-unmount.netlify.app/).
## You can contact me through - [LinkedIn](https://www.linkedin.com/in/althafahd/) - [Twitter](https://twitter.com/Althaf_Ahd)
# Thank you --- _Source: https://npm.io/package/delay-unmount · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._