How to close drawer in chakra Ui programmatically

Question

Chakra Ui provides disclosure

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

and in the documentation this button will close the drawer

<Button variant="outline" mr={3} onClick={onClose}>
   Cancel
</Button>

they haven't provided something like close() function to close it programmatically, or am i missing something

Answer 1

onClose is function provided from chakra-ui which will close the drawer or any portal created opened by chakra-ui. onClose behaves like close() function only.

Answer 2

When you want to open the drawer use onOpen function inside onClick or what you want, when you want to close the drawer use onClose inside inside onClick or what you want. Don't worry, these have code behind which take care of handling drawer.

Answer 3

pass onClose in onClick={} and don't forget to add () after onClose to prevent errors

<Button onClick={()=>onClose()}>X