Context menu

1234567891011121314151617181920212223242526272829303132333435363738
import * as Ariakit from "@ariakit/react";
import { useState } from "react";
import "./style.css";

export default function Example() {
  const [anchorRect, setAnchorRect] = useState({ x: 0, y: 0 });
  const menu = Ariakit.useMenuStore();
  return (
    <div
      className="wrapper"
      onContextMenu={(event) => {
        event.preventDefault();
        setAnchorRect({ x: event.clientX, y: event.clientY });
        menu.show();
      }}
    >
      Right click here
      <Ariakit.Menu
        store={menu}
        modal
        getAnchorRect={() => anchorRect}
        className="menu"
      >
        <Ariakit.MenuItem className="menu-item">Back</Ariakit.MenuItem>
        <Ariakit.MenuItem className="menu-item" disabled>
          Forward
        </Ariakit.MenuItem>
        <Ariakit.MenuItem className="menu-item">Reload</Ariakit.MenuItem>
        <Ariakit.MenuSeparator className="separator" />
        <Ariakit.MenuItem className="menu-item">
          View Page Source
        </Ariakit.MenuItem>
        <Ariakit.MenuItem className="menu-item">Inspect</Ariakit.MenuItem>
      </Ariakit.Menu>
    </div>
  );
}

import * as Ariakit from "@ariakit/react";
import { useState } from "react";
import "./style.css";

export default function Example() {
  const [anchorRect, setAnchorRect] = useState({ x: 0, y: 0 });
  const menu = Ariakit.useMenuStore();
  return (
    <div
      className="wrapper"
      onContextMenu={(event) => {
        event.preventDefault();
        setAnchorRect({ x: event.clientX, y: event.clientY });
        menu.show();
      }}
    >
      Right click here
      <Ariakit.Menu
        store={menu}
        modal
        getAnchorRect={() => anchorRect}
        className="menu"
      >
        <Ariakit.MenuItem className="menu-item">Back</Ariakit.MenuItem>
        <Ariakit.MenuItem className="menu-item" disabled>
          Forward
        </Ariakit.MenuItem>
        <Ariakit.MenuItem className="menu-item">Reload</Ariakit.MenuItem>
        <Ariakit.MenuSeparator className="separator" />
        <Ariakit.MenuItem className="menu-item">
          View Page Source
        </Ariakit.MenuItem>
        <Ariakit.MenuItem className="menu-item">Inspect</Ariakit.MenuItem>
      </Ariakit.Menu>
    </div>
  );
}