Hooks

useDisclosure

BetaSince 0.3.0

Open state for anything that shows and hides, with functions that open, close and toggle it.

import { useDisclosure } from "@anantya/uix";

Overview

useDisclosure holds the open state of anything that shows and hides, with functions that open, close and toggle it. UIX components use it for their open state, such as Dialog. In product code, use it to open a Dialog from code, such as after a check, instead of from a DialogTrigger.

Building block

For content that shows and hides, use Dialog, or Collapsible, Popover or Drawer, coming in v1.

Missing a component? Ask for it instead of building your own.

Signature

function useDisclosure(options?: UseDisclosureOptions): UseDisclosureReturn;

interface UseDisclosureOptions {
  open?: boolean;
  defaultOpen?: boolean;
  onOpenChange?: (open: boolean) => void;
}

interface UseDisclosureReturn {
  open: boolean;
  onOpen: () => void;
  onClose: () => void;
  onToggle: () => void;
  setOpen: Dispatch<SetStateAction<boolean>>;
}

Parameters

Option	Type	Default	Description
`open`	`boolean`	-	Whether it is open, when the parent controls it.
`defaultOpen`	`boolean`	`false`	Whether it starts open, when the parent doesn't control it. Read on the first render only.
`onOpenChange`	`(open: boolean) => void`	-	Called with the new state each time it opens or closes, controlled or not.

Returns

Name	Type	Description
`open`	`boolean`	Whether it is open.
`onOpen`	`() => void`	Opens it.
`onClose`	`() => void`	Closes it.
`onToggle`	`() => void`	Opens it when closed, and closes it when open.
`setOpen`	`Dispatch<SetStateAction<boolean>>`	Sets the state, for passing on as a Dialog's `onOpenChange`.

The functions keep their identity across renders. onOpen, onClose and onToggle ignore their arguments, so you can pass them straight to onClick.

Example

Send invoice opens the Dialog with onOpen, as your code would after finding the customer has no email. The Dialog closes itself through setOpen.

Code

"use client";

import {
  Button,
  Dialog,
  DialogClose,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogTitle,
  useDisclosure,
} from "@anantya/uix";

export default function MissingEmail() {
  const { open, onOpen, setOpen } = useDisclosure();
  return (
    <>
      <Button onClick={onOpen}>Send invoice</Button>
      <Dialog open={open} onOpenChange={setOpen}>
        <DialogContent size="sm">
          <DialogTitle>Add an email for Mehta Textiles</DialogTitle>
          <DialogDescription>
            Invoices are sent by email, and this customer has none yet.
          </DialogDescription>
          <DialogFooter>
            <DialogClose>Not now</DialogClose>
            <DialogClose variant="primary">Add email</DialogClose>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </>
  );
}

Notes

Pass open and setOpen to a Dialog's open and onOpenChange, as the example does. Without a DialogTrigger, closing returns focus to what had it when the Dialog opened
On the server it is defaultOpen, or open when the parent controls it

Changelog

Every change to useDisclosure since 0.3.0 is in the release notes.