Skip to main content

Window

Dependencies​

npm install @mui/material @emotion/react @emotion/styled

Usage​

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

A floating 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.

  • You control whether it is shown with open. The close button only calls onClose, so set open to false there.
  • You can put any React elements inside, not just text.
  • The window body has position: relative, so you can place absolutely positioned elements against its sides.

The example below is live. Edit the code to try your own values.

Example window​

▶ Show code (click to view and edit)
Live Editor
function WindowExample() {
  const [open, setOpen] = useState(false);
  const [log, setLog] = useState([]);
  const add = (message) => setLog((list) => [message, ...list].slice(0, 4));

  return (
    <div>
      <button onClick={() => setOpen(true)}>Open window</button>
      {log.map((message, i) => (
        <div key={i}><code>{message}</code></div>
      ))}
      <Window
        open={open}
        title="Title String"
        onClose={() => {
          add("onClose");
          setOpen(false);
        }}
        onContextMenu={(event) => {
          event.preventDefault();
          add("onContextMenu");
        }}
        onFocus={() => add("onFocus")}
        spawnCoordinate={{ x: 50, y: 300 }}
        spawnSize={{ width: 350, height: 250 }}
      >
        ^ Drag the title to move me, or the right or bottom edge to resize me. Right-click the
        title for onContextMenu.
        <span style={{ position: "absolute", right: 8, bottom: 8 }}>I'm in the corner.</span>
      </Window>
    </div>
  );
}
Result
Loading...

API​

See the Window API reference for every prop, method and type.