Skip to content
Glazier

Hooks

useWindowManager

Access the window manager context.

const {
  state, // { windows: WindowState[], activeWindowId: string | null }
  openWindow, // (config: WindowConfig) => void
  closeWindow, // (id: string) => void
  focusWindow, // (id: string) => void
  updateWindow, // (id: string, updates: Partial<WindowState>) => void
  bringToFront, // (id: string) => void
  sendToBack, // (id: string) => void
  minimizeWindow, // (id: string) => void
  maximizeWindow, // (id: string) => void
  restoreWindow, // (id: string) => void
  getContainerBounds, // () => { width: number, height: number } | null
  icons, // IconState[] - all desktop icons
  deselectAllIcons, // () => void
} = useWindowManager();

useWindow

Convenience hook for a single window.

const {
  id, // Window ID
  title, // Window title
  displayState, // "normal" | "minimized" | "maximized"
  isFocused, // Whether this window is active
  close, // () => void
  minimize, // () => void
  maximize, // () => void
  restore, // () => void
} = useWindow("window-1");

useWindowFrame

Access the WindowFrame context. Must be used within a WindowFrame component.

const {
  windowId, // Window ID
  title, // Window title
  displayState, // "normal" | "minimized" | "maximized"
  isFocused, // Whether this window is active
  close, // () => void
  minimize, // () => void
  maximize, // () => void
  restore, // () => void
  dragHandleRef, // Ref for drag handle element
  dragHandleProps, // Props to spread on drag handle
  activeSnapZone, // "left" | "right" | null
} = useWindowFrame();

Example: Custom Window Chrome

function CustomTitleBar() {
  const { title, close, dragHandleRef, dragHandleProps, isFocused } = useWindowFrame();


  return (
    <div
      ref={dragHandleRef}
      {...dragHandleProps}
      className={`title-bar ${isFocused ? 'focused' : ''}`}
    >
      <span>{title}</span>
      <button onClick={close}>×</button>
    </div>
  );
}


// Usage
<WindowFrame windowId={windowId}>
  <CustomTitleBar />
  <Content>{children}</Content>
</WindowFrame>

useIconLauncher

Handles the “open or focus existing window” pattern for desktop icons.

const {
  launch, // () => void - opens new or focuses existing
  launchProps, // { onDoubleClick } - spread on icon element
  isWindowOpen, // boolean - whether window exists
  existingWindow, // WindowState | undefined
} = useIconLauncher({ iconId: "icon-1" });

Options

OptionTypeDescription
iconIdstringIcon ID (required)

Example

function DesktopIcon({ iconId, iconState, dragProps, onSelect }) {
  const { launchProps, isWindowOpen } = useIconLauncher({ iconId });


  return (
    <div
      {...dragProps}
      {...launchProps}
      onClick={(e) => {
        e.stopPropagation();
        onSelect();
      }}
      className={isWindowOpen ? 'icon-active' : ''}
    >
      <IconImage />
      <span>{iconState.label}</span>
    </div>
  );
}

useWindowDrag

Window-specific drag behavior with snap support.

const { isDragging, activeSnapZone, dragHandleProps } = useWindowDrag({
  windowId: "window-1",
  dragHandleRef: titleBarRef,
  disableMaximizedDragRestore: false, // Allow dragging from maximized
  enableDoubleClickMaximize: true, // Double-click title bar to maximize
  enableSnapToEdges: true, // Snap to left/right edges
  onSnapZoneEnter: (zone) => {}, // Called when entering snap zone
  onSnapZoneLeave: () => {}, // Called when leaving snap zone
});


// Spread dragHandleProps onto your title bar element
<div ref={titleBarRef} {...dragHandleProps}>
  Title
</div>;

Options

OptionTypeDefaultDescription
windowIdstring-Window ID (required)
dragHandleRefRefObject<HTMLElement>-Ref to drag handle element
disableMaximizedDragRestorebooleanfalsePrevent restore when dragging
enableDoubleClickMaximizebooleanfalseDouble-click to maximize
enableSnapToEdgesbooleanfalseEnable edge snapping
onSnapZoneEnter(zone: SnapZone) => void-Called when entering snap zone
onSnapZoneLeave() => void-Called when leaving snap zone

useResize

Resize handle behavior.

const { isResizing, resizeHandleProps } = useResize(
  { width: 400, height: 300 }, // Current size
  { x: 100, y: 100 }, // Current position
  {
    minWidth: 200,
    minHeight: 150,
    maxWidth: 800,
    maxHeight: 600,
    onResizeStart: () => {},
    onResize: (size, position) => updateWindow(id, { size, position }),
    onResizeEnd: (size, position) => {},
  }
);


// Create resize handles for any direction
<div {...resizeHandleProps("se")} />; // Southeast corner
<div {...resizeHandleProps("e")} />; // East edge
<div {...resizeHandleProps("n")} />; // North edge

Resize Directions

"n", "s", "e", "w", "ne", "nw", "se", "sw"

Options

OptionTypeDescription
minWidthnumberMinimum width
minHeightnumberMinimum height
maxWidthnumberMaximum width
maxHeightnumberMaximum height
onResizeStart() => voidCalled when resize starts
onResize(size: Size, position: Position) => voidCalled during resize
onResizeEnd(size: Size, position: Position) => voidCalled when resize ends

useDrag

Generic drag primitive (used internally by useWindowDrag).

const { isDragging, dragHandleProps } = useDrag({
  onDragStart: () => {},
  onDrag: (position, delta) => {},
  onDragEnd: () => {},
  getBoundsConstraint: () => ({ container, windowSize, windowPosition }),
  onConstrainToBounds: (correctedPosition) => {},
});

useDesktopIcon

Access and control a single desktop icon.

const {
  iconState, // The icon's current state
  isSelected, // Whether icon is selected
  select, // (multiSelect?: boolean) => void
  deselect, // () => void
  toggleSelect, // () => void
  launch, // () => void - opens associated window
  updatePosition, // (position: Position) => void
} = useDesktopIcon("icon-1");

useIconDrag

Drag behavior for desktop icons with optional grid snapping.

const { isDragging, wasDragged, dragHandleProps } = useIconDrag({
  iconId: "icon-1",
  gridConfig: { cellWidth: 80, cellHeight: 90, gap: 10 },
  snapOnDrop: true, // Snap only when released (default)
  onDragStart: (position) => {},
  onDrag: (position) => {},
  onDragEnd: (position) => {},
});

Options

OptionTypeDefaultDescription
iconIdstring-Icon ID (required)
gridConfigGridConfig-Grid configuration
snapOnDropbooleantrueSnap only when released
onDragStart(position: Position) => void-Called when drag starts
onDrag(position: Position) => void-Called during drag
onDragEnd(position: Position) => void-Called when drag ends

useWindowRouting

URL synchronization hook for window focus changes.

const { syncUrl } = useWindowRouting({
  adapter: routingAdapter, // RoutingAdapter instance
  pathMap: { home: "/", about: "/about" },
  enabled: true,
});

Options

OptionTypeDefaultDescription
adapterRoutingAdapter-Routing adapter (required)
pathMapRecord<string, string>-Window ID to path mapping
enabledbooleantrueEnable URL sync

RoutingAdapter Interface

interface RoutingAdapter {
  navigate: (path: string) => void;
  getCurrentPath: () => string;
}

Utility Functions

createRegistry

Create a type-safe component registry.

import { createRegistry } from 'glazier';
import { defineWindows } from 'glazier/server';


const windows = defineWindows({
  home: { title: 'Home', ... },
  settings: { title: 'Settings', ... },
});


// TypeScript ensures all IDs have components
const registry = createRegistry(windows.ids, {
  home: HomeWindow,
  settings: SettingsWindow,
});

createBrowserAdapter

Create a browser-based routing adapter.

import { createBrowserAdapter } from 'glazier';


const routingAdapter = createBrowserAdapter();


// Use in onFocusChange
<WindowManagerProvider
  onFocusChange={(windowId) => {
    if (windowId) {
      const path = pathMap[windowId];
      if (path) routingAdapter.navigate(path);
    }
  }}
>

defineWindows

Unified configuration helper. Import from glazier/server for server-component compatibility.

import { defineWindows } from 'glazier/server';


const windows = defineWindows({
  home: {
    title: 'Home',
    defaultPosition: { x: 100, y: 100 },
    defaultSize: { width: 400, height: 300 },
    path: '/',
    icon: {
      label: 'Home',
      iconKey: 'home',
      position: { x: 20, y: 20 },
    },
    defaultProps: { theme: 'dark' },
  },
});


// Methods
windows.ids;                      // ['home']
windows.has('home');              // true
windows.getWindowState('home');   // WindowState
windows.getIconConfigs();         // IconState[]
windows.getIconConfig('home');    // IconState | undefined
windows.getPathMap();             // { home: '/' }
windows.getPathToIdMap();         // { '/': 'home' }
windows.getValidSlugs();          // [] (excludes '/')
windows.getIdFromPath('/');       // 'home'