@reacted/use-popper

@reacted/use-popper

基于 popper.js 的 自定义 React hooks，方便用来显示弹层

API

``js
// targetRef是用来定位的参考点，比如点击一个按钮
// placement, 位置规则
const { show, setShow, mountNode } = usePopper({
targetRef,
placement,
});

if (show) createPortal(, mountNode);
return null;
`

targetRef

定位参考元素，可以是一个 htmlelement, 也可以是一个 virtualElment

virtualElement

`ts
type VirtualElement = {|
getBoundingClientRect: () => ClientRect | DOMRect,
contextElement?: Element,
|};
``

contextElement

contextElement is an optional property that describes the DOM context of the virtual element. This is necessary if getBoundingClientRect is derived from a real DOM element, and that element is within a different scrolling container context to the popper element.