😆

ChakraUIのuseDisclosureでモーダルの開閉を管理する

2022/08/14に公開

useDisclosure is a custom hook used to help handle common open, close, or toggle scenarios. It can be used to control feedback component such as Modal, AlertDialog, Drawer, etc.

UseDisclosureを用いることで、簡単にモーダル（他にもアラートダイアログ、ドロワー）の開閉が管理できます。

import { useDisclosure } from '@chakra-ui/react'

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

設定したonOpen, onClose をモーダルに紐づければ使用可能です。

<Modal isOpen={isOpen} onClose={onClose}>
        <ModalOverlay />
        <ModalContent>
          <ModalHeader>Modal Title</ModalHeader>
          <ModalCloseButton />
          <ModalBody>
           ・・・・
          </ModalBody>

          <ModalFooter>
           ・・・・
          </ModalFooter>
        </ModalContent>
</Modal>

Discussion