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

1import useDelayedUnmount from 'use-delayed-unmount'
2
3const Home = () => {
4    const [[isMounted, isUnmounting], setIsMounted] = useDelayedUnmount(false, 300)
5    
6    return (
7        <>
8            <button onClick={() => setIsMounted(!isMounted)}>
9                Toggle
10            </button>
11            {isMounted && (
12                <p className={isUnmounting ? 'hide' : ''}>
13                    Hello!
14                </p>
15            )}
16        </>
17    )
18}

1p {
2    animation: show 0.3s linear;
3}
4
5.hide {
6    animation: hide 0.3s linear;
7}
8
9@keyframes show {
10    from { opacity: 0; }
11}
12
13@keyframes hide {
14    to { opacity: 0; }
15}

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.