Popover

Popover is a non-modal dialog that floats around its disclosure.

It's commonly used for displaying additional rich content on top of something. Popover is based on Reakit Popover component.

Advanced API

An advanced API based on Reakit Popover API is also available for advanced usage.

import { Button } from "swash/Button";
import { Popover, PopoverDisclosure, usePopoverState } from "swash/Popover";

function Example() {
  const popover = usePopoverState();
  return (
    <>
      <PopoverDisclosure state={popover} as={Button}>
        Disclosure
      </PopoverDisclosure>
      <Popover state={popover}>Popover</Popover>
    </>
  );
}

render(<Example />);

Lazy

Use lazy prop to delay the display of the popover in the next frame. Useful in advanced usage like scrolling container for example.

import { Button } from "swash/Button";
import { Popover, PopoverDisclosure, usePopoverState } from "swash/Popover";

function Example() {
  const popover = usePopoverState();
  return (
    <>
      <PopoverDisclosure state={popover} as={Button}>
        Disclosure
      </PopoverDisclosure>
      <Popover state={popover} lazy>
        Lazy popover
      </Popover>
    </>
  );
}

render(<Example />);