OpenTUI Responsive

OpenTUI Responsive maps terminal width and height to named breakpoint pairs. Its React and Solid providers update generated hooks when dimensions cross configured thresholds.

Configure independent, inclusive minimum thresholds for each axis. Every scale includes zero, and the highest satisfied threshold selects the current name. A Solid layout can provide the generated breakpoint tuple to its children.

const { ResponsiveTUI, useBreakpoint } = createResponsiveTui({
  width: { narrow: 0, medium: 60, wide: 100 },
  height: { short: 0, medium: 16, tall: 28 },
});

export function Layout(props: ParentProps) {
  return <ResponsiveTUI>{props.children}</ResponsiveTUI>;
}

export function Content() {
  const [width, height, viewport] = useBreakpoint();

  return (
    <box flexDirection={width.is("wide") ? "row" : "column"}>
      <text>{`${width()}/${height()}`}</text>
      <text>{viewport.atLeast(["medium", "medium"]) ? "Full layout" : "Compact layout"}</text>
    </box>
  );
}

The hook returns width, height, and viewport accessors. Axis accessors read and compare their own breakpoint names. The viewport accessor tests exact pairs and combines width and height relations with AND semantics.

The Solid and React adapters also provide useRenderableDimensions() for tracking the Yoga-computed width and height of a local renderable.

The README documents provider setup, breakpoint relations, validation rules, and framework adapter APIs.