Standalone Popover

This site is under construction Subscribe to updates

Abstracting the Popover component so that it can be used without PopoverDisclosure or PopoverAnchor. This example uses the getAnchorRect prop from usePopoverState to determine the position of the popup.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
import { useState } from "react";
import { Button } from "ariakit/button";
import {
  Popover,
  PopoverArrow,
  PopoverDescription,
  PopoverHeading,
} from "./popover";
import "./style.css";

export default function Example() {
  const [isOpen, setIsOpen] = useState(false);
  const toggle = () => setIsOpen((isOpen) => !isOpen);
  const close = () => setIsOpen(false);
  return (
    <div>
      <Button onClick={toggle} className="button">
        Accept invite
      </Button>
      {isOpen && (
        <Popover onClose={close} className="popover">
          <PopoverArrow className="arrow" />
          <PopoverHeading className="heading">Team meeting</PopoverHeading>
          <PopoverDescription>
            We are going to discuss what we have achieved on the project.
          </PopoverDescription>
          <Button className="button">Accept</Button>
        </Popover>
      )}
    </div>
  );
}