native-popover-react

native-popover-react

Utilize the native web Popover API in React

import { NativePopover } from "native-popover-react";

function App() {
  return (
    <NativePopover
      trigger={(props) => (
        <button {...props}>Open tooltip</button>
      )}
      popover={(props) => (
        <div {...props} className="my-popover">
          Popover content
        </div>
      )}
    />
  );
}

Controls

import {
  NativePopover,
  usePopoverControls,
} from "native-popover-react";

function App() {
  const popover = usePopoverControls<HTMLDivElement>();

  return (
    <div>
      <button onClick={popover.toggle}>
        {popover.isOpen ? "Close popover" : "Open popover"}
      </button>
      <NativePopover
        control={popover.control}
        popover={(props) => (
          <div {...props} className="my-popover">
            Popover content
          </div>
        )}
      />
    </div>
  );
}

Closing popover

You can close the popover using usePopoverControls, or by utilizing the second argument in the popover prop to create a close button:

<NativePopover
  trigger={(props) => <button {...props}>Toggle</button>}
  popover={(props, closeProps) => (
    <div {...props} className="my-popover">
      Popover content
      <button {...closeProps}>X</button>
    </div>
  )}
/>

Anchoring

[!WARNING]
Experimental: This might not be supported in all modern browsers yet.

Enable an anchor between trigger and popover.

import { NativePopover } from "native-popover-react";

function App() {
  return (
    <div>
      <NativePopover
        anchor={{
          top: "bottom", // top of popover aligned to bottom of trigger
          left: "right", // left of popover aligned to right of trigger
        }}
        trigger={(props) => <button {...props}>Toggle</button>}
        popover={(props) => (
          <div {...props}>Popover content</div>
        )}
      />
    </div>
  );
}