use-pop-layer

A react hooks used to generate popup layer

props

• referer Referer used to locate the popup
• className Class name attached to the popup element
• onClickOutside Event handler when click outside the popup element

Code

// 定义一个弹层组件
const Popup = ({ referer }) => {
  let popElement = usePopup({
    referer, // referer used to locate the popup
    className: 'popup', // classname attached to the popup element
    onClickOutside // event handler when click outside the popup element,
  });

  return createPortal(
    <div>
      <Compact onChange={handleChange} />
    </div>,
    popElement
  );
};

// const
const Demo = () => {
  // state to control the visible state of the popup
  const [open, setOpen] = useState(false);
  // btn where the popup locate
  const referer = useRef(null);
  // click outside handler
  const handleClickOutside = () => setOpen(false);

  return (
    <div>
      <button click={() => setOpen(true)} ref={referer}>
        open
      </button>
      {open && button.current && (
        <Popup onClickOutside={handleClickOutside} referer={referer.current} />
      )}
    </div>
  );
};