@reacted/use-pop-layer
TypeScript icon, indicating that this package has built-in type declarations

1.0.2 • Public • Published

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>
  );
};

Readme

Keywords

Package Sidebar

Install

npm i @reacted/use-pop-layer

Weekly Downloads

0

Version

1.0.2

License

ISC

Unpacked Size

3.1 kB

Total Files

4

Last publish

Collaborators

  • lgm