useContainerReveal @astryx-svelte/core v0.3.0 · hooks
Usage
A headless hover/focus reveal primitive. Gives a container a scoped trigger that reveals (or conceals) content inside it when the container is hovered or receives keyboard focus: the classic "row actions appear on hover" pattern. The reveal is CSS-only: no hover state lives in React and hovering never triggers a re-render. The caller authors no StyleX for the reveal itself; the hook hands out a scoped marker and matching styles, so nested containers never leak hover/focus into one another. Accessible by construction: revealed content is visually hidden at rest with position and opacity (never display:none), so it stays mounted, keeps its place in the tab order, and is announced to assistive technology; it reveals on :focus-within so keyboard users see it when tabbing in, stays visible on touch (never gated behind hover on coarse pointers), and honors prefers-reduced-motion.ts
Best practices
| Guidance | Practices |
|---|---|
| Do | Destructure getContainerProps and getContentRevealProps; spread getContainerProps() on the container (via mergeProps with your own stylex.props) and getContentRevealProps() on the content to reveal. |
| Do | Use for secondary affordances: reveal-on-hover row actions (edit/copy/remove on list or table rows) and overlay controls on a card or media tile (e.g. Thumbnail's remove button). |
| Do | Gate the reveal with isEnabled when a consumer prop decides whether content is revealed on hover or always shown. |
| Do | Pass isLayoutPreserved for absolutely-positioned or overlay content to reserve its box and avoid layout shift when it appears. |
| Don't | Use it to hide content that must always be discoverable; keep essential actions visible instead of gating them behind hover. |
Parameters
| Parameter | Type | Default | Description |
|---|---|---|---|
options | () => UseContainerRevealOptions | — | Configuration object for the reveal container. Optional. |
options.isEnabled | boolean | true | When false the hook is inert: no marker is applied and content getters return no styles, so content is always shown. Lets a component gate reveal on its own prop (e.g. revealOn === "hover"). |
Returns
| Field | Type | Default | Description |
|---|---|---|---|
getContainerProps | () => { class?: string; style?: string; } | — | Spread onto the container whose hover/focus-within drives the reveal. |
getContentRevealProps | (options?: ContentRevealOptions) => { class?: string; style?: string; } | — | Spread onto each revealed (or concealed) child. Accepts isRevealInverted to conceal-on-hover instead of reveal-on-hover, and isLayoutPreserved to reserve the layout box while hidden (opacity-only) and avoid layout shift. |
Examples
Common configurations, variations, and states.useContainerReveal — Reveal-on-hover Row Actions
File rows keep their edit/delete actions hidden at rest and reveal them on hover or keyboard focus via useContainerReveal; the actions stay mounted and in the tab order.