How To Call Function When Modal Closes

import { Layout } from '@/layout';

export const meta = { title: 'How to call a function when Modal/Drawer closes and animation completes?', description: 'How to use transitionProps in Modal/Drawer components', slug: 'how-to-call-function-when-modal-closes', category: 'components', tags: ['modal', 'drawer', 'close', 'transition', 'transitionProps'], created_at: 'December 26, 2023', last_updated_at: 'December 26, 2023', };

export default Layout(meta);

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 (
    <Modal
      title="Modal title"
      opened={opened}
      onClose={handlers.close}
      transitionProps={{
        onEntered: () => console.log('Modal opened, animation done'),
        onExited: () => console.log('Modal closed, animation done'),
      }}
    >
      Modal content
    </Modal>
  );
}