Modal API feels wired

[ivanjeremic]

We have const { isOpen, onOpen, onClose } = useDisclosure(); for the Modal component and I need to say it feels weird to work with it like this anyone else same experience?

How would I trigger a function when modal closes?

[ljosberinn]

You may wrap onClose in your own function and forward that:

const { isOpen, onOpen, onClose } = useDisclosure();

function customOnClose() {
  // do something here
  onClose();
}

return <Modal onClose={customOnClose}>...

FWIW, you don't need to use useDisclosure necessarily. You can reinvent the entire thing with your own states instead, but it usually leads to more code:

const [isOpen, setIsOpen] = useState(false);

function open() {
  // custom logic here
  setIsOpen(true);
}

function close() {
  // custom logic here
  setIsOpen(false);
}

return (
  <>
    <button type="button" onClick={open}>toggle</button>
    <Modal isOpen={isOpen} onClose={close}>...</Modal>
  </>
)

[ivanjeremic]

Thanks now it is more clear why this hook exists

[ljosberinn]

For prosperity: https://github.com/chakra-ui/chakra-ui/blob/develop/packages/hooks/src/use-disclosure.ts there's a bit more happening, so I'd opt to use the hook.