Feature request: unmountOnExit

[NeXTs]

Hello

For now, the content of the modal is rendered in the DOM even when it is hidden. To get around this, I have to add an extra condition, but it breaks the closing animation (closes instantly).

{isVisible && <SomeModal
  visible={isVisible}
  hide={this.hideModal}
/>}

How about adding the unmountOnExit option, as in react-transition-group?

<SomeModal
  visible={isVisible}
  hide={this.hideModal}
  unmountOnExit={true}
/>

[Migggz]

I found a proper solution for this case and works great Just use this hook useDelayedUnmount

useDelayedUnmount.tsx

import { useEffect, useState } from "react";

export function useDelayUnmount(isMounted: boolean, delayTime: number) {
  const [shouldRender, setShouldRender] = useState(false);

  useEffect(() => {
    let timeoutId: number;
    if (isMounted && !shouldRender) {
      setShouldRender(true);
    } else if (!isMounted && shouldRender) {
      timeoutId = setTimeout(() => setShouldRender(false), delayTime);
    }
    return () => clearTimeout(timeoutId);
  }, [isMounted, delayTime, shouldRender]);
  
  return shouldRender;
}

Then in your component

import { useDelayedUnmount } from "@Hooks/useDelayedUnmount"
// ...
const [isVisibile, setIsVisible] = useState(false);
const shouldRenderPopup = useDelayUnmount(isModalOpen, 500);
// ...
{shouldRenderPopup && <SomeModal
  visible={isVisible}
  hide={this.hideModal}
/>}