useDisclosure
Manage boolean open/close state with
open, close, and toggle handlers plus callbacks that fire only on real transitions.Boolean state with
open / close / toggle handlers. Optional onOpen / onClose callbacks fire only on real transitions, never on no-op calls.Loading demo…
import { Badge, Block, Button, Dialog, Row, Text, useDisclosure } from '@plocks/ui';
export function Demo() {
const [opened, { open, close, toggle }] = useDisclosure(false, {
onOpen: () => console.log('opened'),
onClose: () => console.log('closed'),
});
return (
<Block align="flex-start">
<Badge c={opened ? 'success' : 'gray'}>{opened ? 'Open' : 'Closed'}</Badge>
<Row gap="sm" wrap="wrap">
<Button onPress={open}>open</Button>
<Button variant="outline" onPress={close}>close</Button>
<Button variant="ghost" onPress={toggle}>toggle</Button>
</Row>
<Dialog opened={opened} title="Dialog title" onClose={close}>
<Block p="md">
<Text>This dialog's open state is managed by useDisclosure.</Text>
<Button onPress={close}>Close</Button>
</Block>
</Dialog>
</Block>
);
}React Native design for iOS, Android, and Web.
Quick Links
Resources