Back to all questions

How to call a function when Modal/Drawer closes and animation completes?

Last updated

Modal and Drawer components use Transition component under the hood to animate presence. You can use transitionProps property to pass props to Transition component:

import { Modal } from '@mantine/core';
import { useDisclosure } from '@mantine/hooks';

function Demo() {
  const [opened, handlers] = useDisclosure();

  return (
      title="Modal title"
        onEntered: () => console.log('Modal opened, animation done'),
        onExited: () => console.log('Modal closed, animation done'),
      Modal content