Skip to content

Popover

Displays rich content in a portal, triggered by a button.

Installation

npm i @huin-core/react-popover

API Reference

Popover

PropTypeDescription
defaultOpenbooleanDetermines whether the component should be open by default when it is initially rendered.
openbooleanControls the open state of the component. When set to true, the component is displayed; when false, it is hidden.
modalbooleanThe modality of the dialog. When set to true, interaction with outside elements will be disabled and only dialog content will be visible to screen readers.
onOpenChangefunctionEvent handler called when the open state of the component changes.

PopoverTrigger

PropTypeDescription
disabledbooleanWhen set to true, disables the component, preventing user interaction or triggering of associated actions.
asChildbooleanWhen set to true, renders the component as its child element, inheriting the child's styles and behavior.

PopoverPortal

PropTypeDescription
forceMountbooleanUsed to force mounting when more control is needed. Useful when controlling animation with React animation libraries. It inherits from.

PopoverContent

PropTypeDescription
side"top" | "right" | "bottom" | "left"The preferred side of the anchor to render against when open. Will be reversed when collisions occur and avoidCollisions is enabled.
align"center" | "start" | "end"Defines the alignment of the component, determining its position relative to other elements or within its container.
sticky"partial" | "always"The sticky behavior on the align axis. 'partial' will keep the content in the boundary as long as the trigger is at least partially in the boundary whilst 'always' will keep the content in the boundary regardless.
asChildbooleanWhen set to true, renders the component as its child element, inheriting the child's styles and behavior.
forceMountbooleanUsed to force mounting when more control is needed. Useful when controlling animation with React animation libraries. It inherits from.
avoidCollisionsbooleanWhen true, overrides the side andalign preferences to prevent collisions with boundary edges.
hideWhenDetachedbooleanWhether to hide the content when the trigger becomes fully occluded.
sideOffsetnumberThe distance in pixels from the anchor.
alignOffsetnumberAn offset in pixels from the 'start' or 'end' alignment options.
collisionPaddingnumberThe distance in pixels from the boundary edges where collision detection should occur. Accepts a number (same for all sides), or a partial padding object, for example: { top: 20, left: 20 }.
arrowPaddingnumberThe padding between the arrow and the edges of the content. If your content has border-radius, this will prevent it from overflowing the corners.
onOpenAutoFocusfunctionEvent handler called when focus moves into the component after opening. It can be prevented by calling event.preventDefault.
onCloseAutoFocusfunctionEvent handler called when focus moves to the trigger after closing. It can be prevented by calling event.preventDefault.
onEscapeKeyDownfunctionEvent handler called when the escape key is down. It can be prevented by calling event.preventDefault.
onPointerDownOutsidefunctionEvent handler called when a pointer event occurs outside the bounds of the component. It can be prevented by calling event.preventDefault
onFocusOutsidefunctionEvent handler called when focus moves outside the bounds of the component. It can be prevented by calling event.preventDefault.
onInteractOutsidefunctionEvent handler called when an interaction (pointer or focus event) happens outside the bounds of the component. It can be prevented by calling event.preventDefault.

PopoverArrow

PropTypeDescription
widthnumberThe width of the piece in pixels.
heightnumberThe width of the height in pixels.
asChildbooleanWhen set to true, renders the component as its child element, inheriting the child's styles and behavior.

Keyboard Interactions

KeyDescription
Space
Enter
Opens or closes the popover.
Tab
Moves focus to the next element inside the content.
Esc
Closes the popover and returns focus to the trigger.