Skip to main content

at

Description​

Optional. Defines the alignment or anchor point of a popup relative to its parent element

Usage​

at?: string;

Parameters​

The property accepts one of the following string values:

  • "start" (default) - aligns the popup to the left edge of the parent

  • "center" - centers the popup relative to the parent

  • "end" - aligns the popup to the right edge of the parent

  • "left-top" - anchors the popup to the top-left corner of the parent

  • "left-bottom" - anchors the popup to the bottom-left corner of the parent

  • "right-top" - anchors the popup to the top-right corner of the parent

  • "right-bottom" - anchors the popup to the bottom-right corner of the parent

Example​

function Example() {
  const buttonRef = useRef<HTMLButtonElement | null>(null);

  return (
    <>
      <button ref={buttonRef}>Open menu</button>

      <Popup parent={buttonRef.current} at="right-bottom">
        <div className="popup">
          <p>Menu appears at the bottom-right corner of the button</p>
        </div>
      </Popup>
    </>
  );
}