Application Rendering

/**
 * Mount a component and render the output to terminal
 * @param node - React component tree to render
 * @param options - Rendering configuration or output stream
 * @returns Instance object for controlling the rendered app
 */
function render(
  node: ReactNode,
  options?: NodeJS.WriteStream | RenderOptions
): Instance;

import React from "react";
import { render, Box, Text } from "ink";

// Basic rendering
const instance = render(<Text>Hello World</Text>);

// With options
const instance = render(
  <Box>
    <Text color="green">Success!</Text>  
  </Box>,
  {
    stdout: process.stdout,
    stdin: process.stdin,
    exitOnCtrlC: true,
    debug: false
  }
);

// Using custom stream
const instance = render(<Text>Output</Text>, process.stderr);

interface RenderOptions {
  /**
   * Output stream where app will be rendered
   * @default process.stdout
   */
  stdout?: NodeJS.WriteStream;
  
  /**
   * Input stream where app will listen for input
   * @default process.stdin
   */
  stdin?: NodeJS.ReadStream;
  
  /**
   * Error stream for error output
   * @default process.stderr
   */
  stderr?: NodeJS.WriteStream;
  
  /**
   * Render each update as separate output without replacing previous
   * @default false
   */
  debug?: boolean;
  
  /**
   * Listen to Ctrl+C and exit app automatically
   * @default true
   */
  exitOnCtrlC?: boolean;
  
  /**
   * Patch console methods to avoid mixing with Ink output
   * @default true
   */
  patchConsole?: boolean;
}

interface Instance {
  /**
   * Replace previous root node with new one or update props
   * @param node - New React component tree to render
   */
  rerender: (node: ReactNode) => void;
  
  /**
   * Manually unmount the whole Ink app
   */
  unmount: () => void;
  
  /**
   * Returns promise that resolves when app is unmounted
   */
  waitUntilExit: () => Promise<void>;
  
  /**
   * Clean up instance resources
   */
  cleanup: () => void;
  
  /**
   * Clear terminal output
   */
  clear: () => void;
}

import React, { useState } from "react";
import { render, Box, Text } from "ink";

function App() {
  const [message, setMessage] = useState("Initial");
  return <Text>{message}</Text>;
}

const instance = render(<App />);

// Update the app
setTimeout(() => {
  instance.rerender(<Text color="green">Updated!</Text>);
}, 1000);

// Wait for completion
instance.waitUntilExit().then(() => {
  console.log("App has exited");
});

// Clean up
instance.cleanup();

/**
 * Measure the dimensions of a particular Box element
 * @param node - DOM element reference to measure
 * @returns Object with width and height in terminal units
 */
function measureElement(node: DOMElement): {
  width: number;
  height: number;
};

import React, { useRef, useEffect } from "react";
import { render, Box, Text, measureElement } from "ink";

function MeasuredBox() {
  const boxRef = useRef<DOMElement>(null);
  
  useEffect(() => {
    if (boxRef.current) {
      const { width, height } = measureElement(boxRef.current);
      console.log(`Box size: ${width}x${height}`);
    }
  }, []);
  
  return (
    <Box ref={boxRef} width={20} height={5}>
      <Text>Measured content</Text>
    </Box>
  );
}

render(<MeasuredBox />);