useXDSLayer@xds/core · Layer
Usage
Layer is a core positioning hook for rendering overlay content using CSS Anchor Positioning and the Popover API. Use it as the foundation for building popovers, hover cards, and tooltips without React portals.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 instead of using Layer directly for common overlay patterns. |
| Don't | Implement ARIA patterns directly in a Layer — leave accessibility semantics to the higher-level components that build on it. |
Import
ts
Props
| Prop | 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. |
xstyle | StyleXStyles | StyleX styles for layout customization (margins, positioning, sizing). Must be a stylex.create() value — not an inline style object like style={{}}. |