Add option to render using full available height (rows)

Author: DanielSRS

examples/counter-full-height/counter-full-height.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import {Box, render, Text} from '../../src/index.js';
+
+function CounterFullHeight() {
+	const [counter, setCounter] = React.useState(0);
+
+	React.useEffect(() => {
+		const timer = setInterval(() => {
+			setCounter(prevCounter => prevCounter + 1); // eslint-disable-line unicorn/prevent-abbreviations
+		}, 100);
+
+		return () => {
+			clearInterval(timer);
+		};
+	}, []);
+
+	return (
+		<Box borderStyle="round" flexGrow={1}>
+			<Text color="green">{counter} tests passed</Text>
+		</Box>
+	);
+}
+
+render(<CounterFullHeight />, {fullHeight: true});

examples/counter-full-height/index.ts

@@ -0,0 +1 @@
+import './counter-full-height.js';

src/ink.tsx

@@ -24,6 +24,7 @@ export type Options = {
 	debug: boolean;
 	exitOnCtrlC: boolean;
 	patchConsole: boolean;
+	fullHeight?: boolean;
 	waitUntilExit?: () => Promise<void>;
 };
 
@@ -130,6 +131,9 @@ export default class Ink {
 		const terminalWidth = this.options.stdout.columns || 80;
 
 		this.rootNode.yogaNode!.setWidth(terminalWidth);
+		if (this.options.fullHeight && this.options.stdout.rows) {
+			this.rootNode.yogaNode!.setHeight(this.options.stdout.rows);
+		}
 
 		this.rootNode.yogaNode!.calculateLayout(
 			undefined,

src/render.ts

@@ -41,6 +41,12 @@ export type RenderOptions = {
 	 * @default true
 	 */
 	patchConsole?: boolean;
+	/**
+	 * If true, render output will use all avaliable height (rows)
+	 *
+	 * @default undefined
+	 */
+	fullHeight?: boolean;
 };
 
 export type Instance = {