useDisclosure

A minimal hook for managing a single boolean open/closed state. Use it for modals, drawers, popovers, and any component that toggles between two states.

Import

import { useDisclosure } from "@xocialive/ui-components/hooks";

Usage

function UserActions({ userId }: { userId: string }) {
  const deleteModal = useDisclosure();
  const editDrawer = useDisclosure();

  return (
    <>
      <IconButton onClick={editDrawer.onOpen}>
        <EditIcon />
      </IconButton>
      <IconButton onClick={deleteModal.onOpen}>
        <DeleteIcon />
      </IconButton>

      <ModalWrapper open={editDrawer.open} onClose={editDrawer.onClose} title="Edit user">
        <UserEditForm userId={userId} onSuccess={editDrawer.onClose} />
      </ModalWrapper>

      <ConfirmationModal
        open={deleteModal.open}
        onClose={deleteModal.onClose}
        onConfirm={() => deleteUser(userId)}
        title="Delete user?"
      />
    </>
  );
}

API

const {
  open,     // boolean — current state
  onOpen,   // () => void — set to true
  onClose,  // () => void — set to false
  onToggle, // () => void — flip
} = useDisclosure(initialOpen?: boolean);

Value	Type	Description
open	boolean	Current open state
onOpen	() => void	Opens
onClose	() => void	Closes
onToggle	() => void	Toggles