@wedgekit/popover-wip v0.0.0

Popover

The Popover relies on a ref from the toggle element being passed in as a prop. From there, align, offset, and position are calculated using the toggleRef to position the popover without it passing out of the bounds of the window. Additionally, the Popover fires an onExit callback when a scroll or resize event occurs while the component is mount.

Caveat: This is a copy/paste job from @wedgekit/core. The Juneau team makes no guarantees that this component works as documented. The component will be updated in JUN-865. All complaints should go to Nick Bauer

Usage

import Popover from '@wedgekit/popover';

const Test = () => {
  const [popoverOpen, setPopoverOpen] = useState(false);
  const buttonRef = useRef();

  return (
    <div>
      <Button
        onClick={() => setPopoverOpen(true)}
        ref={buttonRef}
      >
        Open Popover
      </Button>
      {
        popoverOpen &&
        <Popover
          toggleRef={buttonRef.current}
          onExit={() => setPopoverOpen(false)}
          clickOutsideExits
          escapeExits
          position="bottom"
          align="left"
          offset={16}
        >
          <p style={{ padding: '24px', fontSize: '16px' }}>
            Here is some content.
          </p>
        </Popover>
      }
    </div>
  );
};

Props