@base-ui-components/react/esm/utils/useAfterExitAnimation.js

Base UI is a library of headless ('unstyled') React components and low-level hooks. You gain complete control over your app's CSS and accessibility features.

import { useAnimationsFinished } from './useAnimationsFinished.js';
import { useEnhancedEffect } from './useEnhancedEffect.js';
import { useEventCallback } from './useEventCallback.js';
import { useLatestRef } from './useLatestRef.js';

/**
 * Calls the provided function when the CSS exit animation or transition completes.
 * Useful for unmounting the component after animating out.
 */
export function useAfterExitAnimation(parameters) {
  const {
    open,
    animatedElementRef,
    onFinished: onFinishedParam
  } = parameters;
  const onFinished = useEventCallback(onFinishedParam);
  const runOnceAnimationsFinish = useAnimationsFinished(animatedElementRef);
  const openRef = useLatestRef(open);
  useEnhancedEffect(() => {
    function callOnFinished() {
      if (!openRef.current) {
        onFinished();
      }
    }
    if (!open) {
      runOnceAnimationsFinish(callOnFinished);
    }
  }, [open, openRef, runOnceAnimationsFinish, onFinished]);
}