useXDSPopover@xds/core · Popover
Usage
Headless hook for click-triggered popovers with focus trapping. Combines useXDSLayer with useFocusTrap for dialog-like popover behavior. Use for interactive floating content that needs keyboard navigation.Best practices
| Guidance | Practices |
|---|---|
| Do | Use for interactive content (forms, menus, pickers) that needs focus trapping and light dismiss. |
| Do | Prefer the XDSPopover component for standard trigger-content pairs — use the hook for custom trigger patterns. |
| Don't | Use for non-interactive hover previews — use useXDSHoverCard or useXDSTooltip instead. |
Parameters
| Param | Type | Description |
|---|---|---|
contentrequired | ReactNode | ((props: ContextRenderProps) => ReactNode) | Content to display in the popover. Can be a render function receiving layer props. |
placement | LayerPlacement (default: 'below') | Position relative to the trigger. |
alignment | LayerAlignment (default: 'start') | Alignment along the placement axis. |
hasLightDismiss | boolean (default: true) | Whether clicking outside dismisses the popover. |
hasSurface | boolean (default: true) | Whether to apply the default popover surface styles (background, shadow, radius). |
onShow | () => void | Callback fired when the popover becomes visible. |
onHide | () => void | Callback fired when the popover is hidden. |
Returns
| Field | Type | Description |
|---|---|---|
| triggerProps | object | Props to spread on the trigger element (ref, aria-expanded, event handlers). |
| layerNode | ReactNode | The popover layer to render (include in JSX output). |
| isOpen | boolean | Whether the popover is currently visible. |
| show | () => void | Imperatively show the popover. |
| hide | () => void | Imperatively hide the popover. |
Import
ts