useDisclosure

Hook to handle disclosure state.

Import

import {useDisclosure} from '@kaiverse/k/hooks'

Usage

useDisclosure hook returns open, close, and toggle helpers that can be handy for managing controlled <dialog>, <details>, and other disclosure components.

Examples

Controlled <details> element

Playground

State: false

Open <details> element

System Requirements

Requires a computer running an operating system. The computer must have some memory and ideally some kind of long-term storage. An input device as well as some form of output device is recommended.

Source code

usage.tsx

import {useDisclosure} from '@kaiverse/k/hooks'
import {classNames} from '@kaiverse/k/utils'

export default function ControlledDetailsDemo() {
  const [opened, {open, close, toggle}] = useDisclosure(false)

  return (
    <>
      <p>
        State:{' '}
        <strong className={opened ? 'text-success' : 'text-error'}>{opened.toString()}</strong>
      </p>

      <button
        className={classNames('btn my-4', opened ? 'btn-secondary' : 'btn-neutral')}
        type="button"
        onClick={toggle}
      >
        {opened ? 'Close' : 'Open'} {'<details>'} element
      </button>

      <details
        open={opened}
        // browsers can open <details> element automatically on some cases, eg: users search for contents that are inside <details> element.
        // so with "controlled" approach, we need to sync react `state` with the inner state of the <details> element.
        onToggle={(e) => (e.currentTarget.open ? open() : close())}
      >
        <summary
          onClick={(e) => {
            e.preventDefault()
            toggle()
          }}
        >
          System Requirements
        </summary>
        <p>
          Requires a computer running an operating system. The computer must have some memory and
          ideally some kind of long-term storage. An input device as well as some form of output
          device is recommended.
        </p>
      </details>
    </>
  )
}

<Dialog> element

use-disclosure.tsx

import {useDisclosure} from '@kaiverse/k/hooks'
import {Dialog} from '@kaiverse/k/components'

const [opened, {open, close}] = useDisclosure(false)

<button type="button" onClick={open}>
  Open Dialog
</button>

<Dialog open={opened} onClose={close}>
  ...
</Dialog>

Callbacks

• onOpen: will be called when the disclosure state is set to true.
• onClose: will be called when the disclosure state is set to false.

use-disclosure-callbacks.tsx

useDisclosure(false, {
  onOpen: () => {...},
  onClose: () => {...},
})

Type definition

function useDisclosure(
  defaultOpened?: boolean,
  callbacks?: {onOpen?: () => void; onClose?: () => void},
): Readonly<[boolean, {open: () => void; close: () => void; toggle: () => void}]>