Skip to main content

Window

import Window from "@arclockproject/common/components/Window";

For examples and live demos, see the Window guide.

Window​

Component · default export

A floating desktop-style window. Drag it by the title bar, resize it from the right edge, bottom edge or bottom-right corner (mouse only), and maximize it with the [ ] button. It stays inside the browser window while dragging. children is the content below the title bar.

It is controlled: the X button only calls onClose, so set open to false yourself to hide it.

Props

  • title? (string) — Text in the title bar.
  • open? (boolean) — Show the window. It stays mounted when hidden.
  • onClose? (() => void) — Called when the X button is clicked.
  • onFocus? (() => void) — Called when the window is clicked or touched, e.g. to bring it to the front.
  • onContextMenu? ((event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void) — Called on right-click of the title bar.
  • noClose? (boolean) — Hide the X button.
  • minWidth? (number, default 200) — Smallest width when resizing, in pixels.
  • minHeight? (number, default 200) — Smallest height when resizing, in pixels.
  • spawnCoordinate? (object, default { x: 100, y: 100 }) — Starting position of the top-left corner, in pixels from the top-left of the screen.
    • x (number)
    • y (number)
  • spawnSize? (object, default { width: 300, height: 300 }) — Starting size, in pixels.
    • width (number)
    • height (number)
  • children? (ReactNode)

Example

const [open, setOpen] = useState(true);

<Window title="Notes" open={open} onClose={() => setOpen(false)}>
  Hello!
</Window>