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.

Import

import { useDisclosure } from '@passfort/castle'
content_copy
Copy

Return value

The useDisclosure hook returns an object with the following fields:

Usage

function Example() {
  const { isOpen, onOpen, onClose, onToggle } = useDisclosure({
    onClose: () => log('Accordion closed.'),
    onOpen: () => log('Accordion open.'),
  })

  return (
    <Accordion>
      <Accordion.Item
        isOpen={isOpen}
        onOpen={onOpen}
        onClose={onClose}
        title="Controlled Accordion"
      >
        <Text>Open accordion content</Text>
      </Accordion.Item>
    </Accordion>
  )
}
function Example() {
  const { isOpen, onOpen, onClose, onToggle } = useDisclosure({
    onClose: () => log('Accordion closed.'),
    onOpen: () => log('Accordion open.'),
  })

  return (
    <Accordion>
      <Accordion.Item
        isOpen={isOpen}
        onOpen={onOpen}
        onClose={onClose}
        title="Controlled Accordion"
      >
        <Text>Open accordion content</Text>
      </Accordion.Item>
    </Accordion>
  )
}
content_copy
Copy
live example