v6.0.35

use-disclosure

Manage boolean state
Import

Usage

use-disclosure hook manages boolean state. It provides open, close and toggle handlers and accepts optional onOpen and onClose callbacks. It can be used to manage controlled modals, popovers and other similar components:

import { useDisclosure } from '@asuikit/hooks';
function Demo() {
const [opened, handlers] = useDisclosure(false);
// Sets opened to true
handlers.open();
// Sets opened to false
handlers.close();
// Sets opened to true if it was false and vice versa
handlers.toggle();
}

Callbacks

onOpen and onClose callbacks are called when opened state changes:

import { useDisclosure } from '@asuikit/hooks';
function Demo() {
const [opened, handlers] = useDisclosure(false, {
onOpen: () => console.log('Opened'),
onClose: () => console.log('Closed'),
});
// Calls onOpen callback and sets opened to true
handlers.open();
// Does nothing, opened is already true
handlers.open();
// Calls onClose callback and sets opened to false
handlers.close();
// Does nothing, opened is already false
handlers.close();
// Calls onOpen or onClose depending on next state
handlers.toggle();
}

Definition

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