Skip to content

useContainerReveal

@astryxdesign/core v0.7.1 · useContainerReveal

Parameters ​

NameTypeDefaultDescription
optionsUseContainerRevealOptions{}Configuration object for the reveal container. Optional.
options.isEnabledMaybeRefOrGetter<boolean>trueWhen false the hook is inert: the container gets no classes and the content getters return nothing, so content is always shown. Read on every call, so a component can flip it after mount (e.g. revealOn === "hover").
containerProps(options?).hoverDelaynumber—Milliseconds the pointer must dwell before the reveal starts: a hover-intent gate like Tooltip's and HoverCard's delay, so a cursor sweeping across a list leaves nothing painted behind it. Keyboard and coarse pointers never wait.
containerProps(options?).forceState'active' | 'inactive'—Pins the trigger state when the caller owns it: a motion gate, a scroll, or a row whose menu is open. 'inactive' still yields to keyboard focus and coarse pointers.
contentProps(options?).isRevealInvertedbooleanfalseConceal on hover instead of reveal on hover. Pointer only; keyboard focus and touch still show the content.
contentProps(options?).isLayoutPreservedbooleanfalseReserves the layout box while hidden (opacity only) and avoids layout shift.
contentProps(options?).forceVisibility'shown' | 'hidden'—Pins this one element's appearance whatever the container is doing. 'hidden' yields to focus.

Returns ​

NameTypeDescription
containerProps(options?: ContainerRevealOptions) => { class?: string | Record<string, boolean>, style?: CSSProperties }Bind onto the container whose hover and focus-within drive the reveal. Accepts hoverDelay and forceState. Returns an empty object when the hook is disabled.
contentProps(options?: ContentRevealOptions) => { class?: string | Record<string, boolean> }Bind onto each revealed or concealed child. Accepts isRevealInverted, isLayoutPreserved, and forceVisibility. Returns an empty object when the hook is disabled.