Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/apursley2012/old-windows/llms.txt

Use this file to discover all available pages before exploring further.

WindowContext is the state backbone of Old Windows. It stores the array of open windows, tracks which window is currently active, and exposes a complete set of management functions through the useWindows() hook. Every component in the tree — Desktop, Window, and Taskbar — reads from and writes to this single context rather than managing their own local state.

​
Setup

Wrap your application root in WindowProvider. Nothing in the Old Windows component tree will function without it. 
import { WindowProvider } from './components/WindowContext'
import { Desktop } from './components/Desktop'

function App() {
  return (
    <WindowProvider>
      <Desktop />
    </WindowProvider>
  )
}
WindowProvider initialises two pieces of React state:
StateTypeInitial value
windowsArray[]
activeWindowIdstring | nullnull
It also maintains a module-level zIndex counter initialised to 10 (let x = 10). This counter is incremented by openWindow when creating a new window and by focusWindow whenever a window is brought to front, so the newly focused window always renders on top.

​
useWindows() Hook

Call useWindows() inside any component that is a descendant of WindowProvider to access the full window management API.
useWindows() throws the error "useWindows must be used within WindowProvider" if called outside of a WindowProvider tree. Always ensure WindowProvider is an ancestor before calling the hook.

​
Returned values

​
windows
Array<WindowState>
The live array of window state objects. Each entry is an object with id, title, component, icon, state, zIndex, width, height, defaultX, and defaultY fields. Mutated by all the actions below.
​
activeWindowId
string | null
The id of the window that currently has focus (i.e., has the navy title bar and sits on top). null when no window is focused — for example, after all windows are minimized or closed.
​
openWindow
function
Opens a new window or restores/focuses an existing one. See the openWindow options section below for the full signature.
​
closeWindow
function
closeWindow(id: string) => void — Removes the window from the windows array. If the closed window was the active window, activeWindowId is updated to the window with the next-highest zIndex, or null if no windows remain.
​
minimizeWindow
function
minimizeWindow(id: string) => void — Sets the target window’s state to 'minimized'. If it was the active window, activeWindowId is cleared to null. The window’s Taskbar button remains visible.
​
maximizeWindow
function
maximizeWindow(id: string) => void — Sets the target window’s state to 'maximized' and calls focusWindow(id) to bring it to front and mark it active.
​
restoreWindow
function
restoreWindow(id: string) => void — Sets the target window’s state back to 'open' and calls focusWindow(id). Used by the Taskbar when clicking a minimized window button.
​
focusWindow
function
focusWindow(id: string) => void — Increments the module-level zIndex counter, assigns the new value to the target window, and sets activeWindowId to the window’s id. Called automatically by maximizeWindow and restoreWindow, and by Window itself on mousedown.

​
openWindow Options

openWindow has the following signature: 
openWindow(id, title, component, icon, options)
Positional parameters:
ParameterTypeDescription
idstringUnique identifier. If a window with this id already exists, it is restored or focused instead of duplicated.
titlestringText shown in the title bar and Taskbar button.
componentReactNodeThe content to render inside the window body.
iconReactNodeEmoji or element shown next to the title.
options object:
​
width
number
default:"600"
Initial window width in pixels.
​
height
number
default:"400"
Initial window height in pixels.
​
defaultX
number
default:"50 + windows.length * 30"
Initial horizontal position from the left edge of the desktop. Cascades automatically if omitted so multiple windows do not stack directly on top of each other.
​
defaultY
number
default:"50 + windows.length * 30"
Initial vertical position from the top edge of the desktop. Cascades automatically alongside defaultX.

​
Re-opening an existing window

If openWindow is called with an id that already exists in the windows array:
  • If that window is minimized, its state is set back to 'open' and focusWindow is scheduled via setTimeout to run after the state update.
  • If it is already open or maximized, focusWindow is scheduled via setTimeout and the windows array is returned unchanged — no duplicate is created.

​
Programmatic Usage Example

import { useWindows } from './components/WindowContext'
import AboutComponent from './apps/About'

function LaunchButton() {
  const { openWindow } = useWindows()

  function handleClick() {
    openWindow(
      'about',
      'about_me.html',
      <AboutComponent />,
      '👤',
      { width: 500, height: 450 }
    )
  }

  return (
    <button onClick={handleClick}>
      Open About Window
    </button>
  )
}
The id you pass to openWindow is the canonical identity of the window. Calling openWindow('about', ...) a second time will focus the existing About window rather than opening a second copy — so you can safely call it from multiple places without guarding against duplicates.

Build docs developers (and LLMs) love

Get started for freeTalk to us