# UI: ContextMenuPopover

> Das Popover eines Kontextmenüs, geöffnet an einem Punkt des Viewports.

Source: https://pithyx.org/de/docs/reference/sdk/ui/context-menu/
Markdown: https://pithyx.org/de/docs/reference/sdk/ui/context-menu.md

Das Popover eines Kontextmenüs, geöffnet an einem Punkt des Viewports. Importiere die Token-Datei einmal (`@pithyx/ui/tokens.css`) und umschließe die App mit `UiProvider`; siehe [@pithyx/ui](https://pithyx.org/de/docs/sdk/ui/).

Beim Build aus den TSDoc-Kommentaren von @pithyx/ui 1.0.0-rc.9 erzeugt; der Text unter den Überschriften ist der Kommentar im Quelltext und bleibt Englisch.

## Funktionen

### ContextMenuPopover()

```ts
function ContextMenuPopover(props): Element;
```

The popover of a context menu, opened at a point of the viewport. A second right-click while it is open moves the
menu there, or to whichever menu the element at that point opens.

#### Parameter

| Parameter        | Typ                                                                                   | Beschreibung                                                                |
| ---------------- | ------------------------------------------------------------------------------------- | --------------------------------------------------------------------------- |
| `props`          | \{ `x`: `number`; `y`: `number`; `onClose`: () => `void`; `children`: `ReactNode`; \} | The point and the menu.                                                     |
| `props.x`        | `number`                                                                              | Horizontal position in the viewport, in CSS pixels (the event's `clientX`). |
| `props.y`        | `number`                                                                              | Vertical position in the viewport, in CSS pixels (the event's `clientY`).   |
| `props.onClose`  | () => `void`                                                                          | Called when the menu should close: Escape, a press outside, a picked entry. |
| `props.children` | `ReactNode`                                                                           | The menu, usually a `Menu`.                                                 |

#### Rückgabewert

`Element`

The popover, open until `onClose` removes it.

#### Beispiel

```tsx
{
  menuAt && (
    <ContextMenuPopover x={menuAt.x} y={menuAt.y} onClose={() => setMenuAt(null)}>
      <Menu onAction={run}>
        <MenuItem id="rename">Rename</MenuItem>
      </Menu>
    </ContextMenuPopover>
  );
}
```