hooks library

10 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 hook overview

The useDisclosure hook manages boolean state. It returns a tuple of [boolean, handlers] where the boolean is the opened state and handlers is an object containing open, close, toggle, and set methods. It accepts an optional initial state (boolean) and options object with onOpen and onClose callbacks.

useDisclosure return type

useDisclosure returns UseDisclosureReturnValue, which is defined as [boolean, UseDisclosureHandlers]. The first element is the opened state, the second is the handlers object.

useDisclosure handlers methods

The handlers object returned by useDisclosure has four methods: open() sets opened to true, close() sets opened to false, toggle() inverts the state, and set(value: boolean) sets opened to the given boolean value.

useDisclosure callbacks behavior

The onOpen callback executes when the state changes to true, and onClose executes when it changes to false. Calling handlers.open() when already open, or handlers.close() when already closed, does nothing and does not trigger the respective callback.

useDisclosure function signature

function useDisclosure(initialState?: boolean, options?: UseDisclosureOptions): UseDisclosureReturnValue. The initialState parameter is optional and defaults to false. The options parameter accepts an optional object with onOpen and onClose callback properties.

UseDisclosureOptions interface

UseDisclosureOptions contains two optional properties: onOpen?: () => void and onClose?: () => void. Both are callback functions that execute when the opened state changes.

UseDisclosureHandlers interface

UseDisclosureHandlers contains four methods: set: (value: boolean) => void, open: () => void, close: () => void, and toggle: () => void.

useDisclosure exported types

The types UseDisclosureOptions, UseDisclosureHandlers, and UseDisclosureReturnValue are exported from the @mantine/hooks package and can be imported for type annotations.

useDisclosure basic usage example

Example showing basic usage: const [opened, handlers] = useDisclosure(false); handlers.open() sets opened to true; handlers.close() sets it to false; handlers.toggle() inverts it; handlers.set(true) sets it to a specific value.

useDisclosure with callbacks example

Example showing callbacks: const [opened, handlers] = useDisclosure(false, { onOpen: () => console.log('Opened'), onClose: () => console.log('Closed') }). Calling handlers.open() when already open does nothing. Calling handlers.close() when already closed does nothing. handlers.toggle() calls the appropriate callback based on current state.

Give your agent this brain