UseDisclosureHandlers interface
UseDisclosureHandlers is an interface with four methods: set(value: boolean) sets the state to the provided boolean, open() sets state to true, close() sets state to false, and toggle() switches the state.
hooks/usedisclosure
9 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.
useDisclosure function signature
function useDisclosure(initialState?: boolean, options?: UseDisclosureOptions): UseDisclosureReturnValue. The initialState parameter defaults to false if not provided. The options parameter is optional and accepts UseDisclosureOptions. The return type is UseDisclosureReturnValue which is [boolean, UseDisclosureHandlers].
useDisclosure hook overview
The useDisclosure hook manages boolean state and provides open, close, and toggle handlers. It accepts an optional initial state and optional onOpen and onClose callbacks. It returns a tuple containing the boolean state and a handlers object.
useDisclosure basic usage example
import { useDisclosure } from '@mantine/hooks'; function Demo() { const [opened, handlers] = useDisclosure(false); handlers.open(); // Sets opened to true handlers.close(); // Sets opened to false handlers.toggle(); // Toggles opened state }
useDisclosure handlers
The handlers object returned by useDisclosure has four methods: open() sets state to true, close() sets state to false, toggle() switches the state, and set(value: boolean) directly sets the state to the provided boolean value.
useDisclosure onOpen and onClose callbacks
The useDisclosure hook accepts optional onOpen and onClose callbacks in an options object. The onOpen callback executes when the state changes to true, and the onClose callback executes when the state changes to false. Callbacks only fire if the state actually changes—calling open() when already open or close() when already closed does not trigger the callback.
useDisclosure callbacks example
import { useDisclosure } from '@mantine/hooks'; function Demo() { const [opened, handlers] = useDisclosure(false, { onOpen: () => console.log('Opened'), onClose: () => console.log('Closed'), }); handlers.open(); // Calls onOpen, sets opened to true handlers.open(); // Does nothing, already open handlers.close(); // Calls onClose, sets opened to false handlers.close(); // Does nothing, already closed handlers.toggle(); // Calls onOpen or onClose depending on current state }
UseDisclosureOptions interface
UseDisclosureOptions is an optional interface with two properties: onOpen?: () => void and onClose?: () => void. Both properties are optional.
useDisclosure exported types
UseDisclosureOptions, UseDisclosureHandlers, and UseDisclosureReturnValue types are exported from the @mantine/hooks package and can be imported for use in TypeScript applications.