Basic pop-up box implementation.
This component is very powerful. The reference component wrapped by this component will not produce any wrapped elements on the dom, so it will not have any impact on the reference component. The content of the pop-up box of this component will only be mounted when it is actually triggered, so performance is guaranteed.
Examples
Basic
Basic
Different trigger methods
Different trigger methods
Arrow
Arrow
Nest
Nest
Properties
To use this component, the child component needs to expose the
refinstance and the events ofonClick,onMouseEnter,onMouseLeave,onFocus,onBlur, andonContextMenu.
| Property | Description | Type | Default | Require |
|---|---|---|---|---|
| children | Child node | React.ReactElement | — | true |
| popup | Pop-up box | React.ReactElement | - | true |
| placement | Specify the orientation of the pop-up box | auto | auto-start | auto-end | top | top-start | top-end | right | right-start | right-end | bottom | bottom-start | bottom-end | left | left-start | left-end | auto | false |
| popupContainer | Specify the parent container of the pop-up box | string | HTMLElement | (() => string | HTMLElement) | () => body | false |
| open | Whether to show pop-up box | boolean | - | false |
| defaultOpen | Whether the default pop-up box is displayed, when open exists, the option is invalid | boolean | false | false |
| onOpenChange | Callback when the status of the popup box changes | (open: boolean) => void | - | false |
| trigger | Trigger method | hover | focus | click | contextMenu | false | array | hover | false |
| transitionClassName | Animation class name, see CssTransition | string | - | false |
| className | Pop-up box class name | string | 0 | false |
| onAfterClosed | Callback when popup is closed | () => void | - | false |
| mountOnShow | Dom will mount when popper shows | boolean | true | false |
| unmountOnHide | Dom will unmount when popper hides | boolean | - | false |
| hoverOptions | options for hover action, see usePopper | HoverOptions | - | false |
| clickOptions | options for click action, see usePopper | ClickOptions | - | false |
| focusOptions | options for focus action, see usePopper | FocusOptions | - | false |
| contextMenuOptions | options for contextMenu action, see usePopper | ContextMenuOptions | - | false |
| shiftOptions | controls the popper's offset behavior when it encounters occlusion, see usePopper | ShiftOptions | false | - | false |
| autoPlacementOptions | controls the behavior of the popper to switch positioning when it encounters occlusion, see usePopper | AutoPlacementOptions | false | - | false |
| arrowOptions | control arrow behavior, see usePopper | ArrowOptions | - | false |
| autoUpdateOptions | control how automatic positioning, see usePopper | AutoUpdateOptions | - | false |
| arrow | Arrow | React.ReactNode | - | false |
| offset | Pop-up box offset, see usePopper | OffsetOptions | 0 | false |