NoteThis hook provides a "Click Outside" and "Escape Key" listener out of the box. Ensure that both the anchorRef and popoverRef are correctly assigned to avoid the popover closing immediately when clicking the trigger.
The usePopover manages the open/closed state of an overlay anchored to a trigger element. It handles common accessibility and UX patterns, such as closing the popover when the user presses the Escape key or clicks outside the boundaries of both the popover content and the anchor (trigger) element.
| Name | Type | Description |
|---|---|---|
| anchorRef | React.RefObject<T> | Ref to be assigned to the trigger element (e.g., a button). |
| popoverRef | React.RefObject<T> | Ref to be assigned to the floating content element. |
| isOpen | boolean | Reactive state indicating if the popover is currently visible. |
| open | () => void | Function to set isOpen to true. |
| close | () => void | Function to set isOpen to false. |
| toggle | () => void | Function to flip the current visibility state. |