app/tui/useTerminalSize.ts

zzmq.dev@gmail.com/zz / app / tui / useTerminalSize.ts @ 5e5720fb Download

Ladder Summary

file The file defines and exports the **`useTerminalSize`** React hook, which returns an object containing the current terminal’s row and column counts. It obtains the stdout stream via Ink’s `useStdout`, initializes the size from the stream’s properties, and updates the state whenever a `"resize"` event is emitted, ensuring the dimensions stay in sync with the live terminal size.

// The actual terminal size, kept live across resizes -- what makes it
// possible to size content panes to the real screen instead of a guess,
// so a tab's content clips/truncates to what fits rather than spilling
// into the shell's own scrollback.
import { useEffect, useState } from "react";
import { useStdout } from "ink";

export function useTerminalSize(): { rows: number; columns: number } {
  const { stdout } = useStdout();
  const out = stdout as NodeJS.WriteStream;
  const [size, setSize] = useState({ rows: out.rows || 24, columns: out.columns || 80 });

  useEffect(() => {
    const onResize = () => setSize({ rows: out.rows || 24, columns: out.columns || 80 });
    out.on("resize", onResize);
    return () => {
      out.off("resize", onResize);
    };
  }, [out]);

  return size;
}