https://github.com/kenmueller/use-delayed-unmount

Delay the unmount of a component to apply an unmount animation
https://github.com/kenmueller/use-delayed-unmount

Last synced: about 2 months ago
JSON representation

Delay the unmount of a component to apply an unmount animation

• Host: GitHub
• URL: https://github.com/kenmueller/use-delayed-unmount
• Owner: kenmueller
• Created: 2020-11-06T06:02:57.000Z (about 4 years ago)
• Default Branch: master
• Last Pushed: 2023-03-18T19:31:42.000Z (almost 2 years ago)
• Last Synced: 2024-11-09T14:04:07.226Z (about 2 months ago)
• Language: JavaScript
• Size: 2.93 KB
• Stars: 1
• Watchers: 2
• Forks: 1
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# useDelayedUnmount

> Delay the unmount of a component to apply an unmount animation.

## What does it do?

By delaying the unmounting of a component, you can apply an animation before the component unmounts. This is useful for modals, dropdowns, and a bunch of other scenarios since CSS does not natively support unmount animations.

## Example

```js

import useDelayedUnmount from 'use-delayed-unmount'

const Home = () => {

    const [[isMounted, isUnmounting], setIsMounted] = useDelayedUnmount(false, 300)

    

    return (

        <>

             setIsMounted(!isMounted)}>

                Toggle

            

            {isMounted && (

                


                    Hello!

                

            )}

        >

    )

}

```


```css

p {

    animation: show 0.3s linear;

}

.hide {

    animation: hide 0.3s linear;

}

@keyframes show {

    from { opacity: 0; }

}

@keyframes hide {

    to { opacity: 0; }

}

```

## How it works

When `setIsMounted` is called with `true`, the component is immmediately mounted. When `setIsMounted` is called with `false`, `isUnmounting` is set to `true` and `isMounted` is set to false only after the specified delay.