Astryx Design System

useLayer@astryxdesign/core v0.0.15 · useLayer

Usage

Core positioning hook for rendering overlay content using CSS Anchor Positioning and the Popover API. Use it as the foundation for custom popovers, hover cards, tooltips, and fixed-position layers when higher-level components are not enough.

ts
import {useLayer} from '@astryxdesign/core/Layer'

Best practices

Guidance	Practices
Do	Use context mode for anchor-positioned overlays relative to a trigger element, and fixed mode for manually positioned overlays at specific coordinates.
Do	Build on higher-level components like Popover, HoverCard, and Tooltip for common overlay patterns.
Don't	Implement ARIA patterns directly in a Layer unless you also own the full accessibility behavior.

Parameters

Param	Type	Description
moderequired	'context' \| 'fixed'	Positioning strategy: context uses CSS anchor positioning relative to a trigger ref; fixed uses explicit x/y coordinates.
onShow	() => void	Callback fired when the layer becomes visible.
onHide	() => void	Callback fired when the layer is hidden.
lightDismiss	boolean (default: false)	Whether clicking outside should dismiss the layer using native popover light-dismiss behavior.

Returns

Field	Type	Description
ref	RefCallback<HTMLElement> \| undefined	Trigger ref for context mode. Undefined in fixed mode.
anchorId	string	CSS anchor name for context mode positioning.
show	() => void	Imperatively show the layer.
hide	() => void	Imperatively hide the layer.
isOpen	boolean	Whether the layer is currently open.
id	string	Unique ID for aria-describedby or other ARIA relationships.
render	(children: ReactNode, props: ContextRenderProps \| FixedRenderProps) => ReactNode	Render function for the popover element. Pass placement/alignment in context mode or x/y in fixed mode.

Examples

Common configurations, variations, and states.

useLayer — Anchored Layer

Low-level anchored overlay rendered with useLayer and a custom surface.