UseDisclosure

Last updated: 3.0.0 (04/07/2024) | Added: 2.0.0

useDisclosure is a hook that allows the manipulation of a boolean state. It is widely used internally to hide or show components such as the Tooltip and Modal.

Usage

import { useDisclosure, Tooltip, Button } from "@valence-ui/core";

function MyComponent() { 
    const disclosure = useDisclosure(false);

    return ( 
        <Tooltip
            disclosure={disclosure}
        >
            <Tooltip.Trigger>
                <Button
                    onClick={() => disclosure.open()}
                >
                    I'm a button!
                </Button>
            </Tooltip.Trigger>
            <Tooltip.Content>
                I'm a tooltip!
            </Tooltip.Content>
        </Tooltip>
    )
}

Many Valence components (such as the Tooltip) will accept the entire Disclosure as a prop, but this may be overkill or incompatible with many external components. If you instead need the raw boolean value, use the disclosure.opened attribute.

Return type

Attribute	Type	Description
opened	boolean	Whether the disclosure is open.
open	() => void	Open the disclosure.
close	() => void	Close the disclosure.
toggle	() => void	Toggle the disclosure.
update	(value: boolean) => void	Manually update the disclosure.

---

Changelog

• 3.0.0: added the .toggle() method to the return type.

• 2.0.0: added hook.