FLUXLAY

useTerminal

Creates a read-only xterm terminal instance and attaches it to a container element.

Import

import { useTerminal } from "@fluxlay/react";

Signature

function useTerminal(options?: UseTerminalOptions): UseTerminalReturn;

Parameters

UseTerminalOptions

PropertyTypeDefaultDescription
fontSizenumber12Font size in pixels.
fontFamilystringSystem monospaceFont family string.
themeIThemeTerminalThemes.dark.defaultxterm color theme.

Return Value

PropertyTypeDescription
terminalRefReact.RefObject<HTMLDivElement>Ref to attach to the container <div>.
instanceTerminalInstance | nullTerminal instance, available after mount.

TerminalInstance

PropertyTypeDescription
terminalTerminalThe xterm Terminal instance.
fitAddonFitAddonThe FitAddon for auto-resizing.

Example

import { useTerminal, useShell, TerminalThemes } from "@fluxlay/react";
 
function Monitor() {
  const { terminalRef, instance } = useTerminal({
    fontSize: 14,
    fontFamily: "'JetBrains Mono', monospace",
    theme: TerminalThemes.catppuccin.mocha
  });
 
  useShell("my-command", { terminal: instance });
 
  return <div ref={terminalRef} style={{ height: "100%", width: "100%" }} />;
}

Behavior

  • The terminal is read-only — keyboard input is disabled.
  • The cursor is hidden.
  • Scrollback is disabled.
  • The terminal automatically fits its container using the FitAddon.
  • CSS overrides ensure the terminal fills the container element.