Ink use focus with id

"use strict";
const React = require("react");
const {
	render,
	Box,
	Text,
	useFocus,
	useInput,
	useFocusManager
} = require("../..");

const Focus = () => {
	const {focus} = useFocusManager();

	useInput(input => {
		if (input === "1") {
			focus("1");
		}

		if (input === "2") {
			focus("2");
		}

		if (input === "3") {
			focus("3");
		}
	});

	return (
		
			
				
					Press Tab to focus next element, Shift+Tab to focus previous element,
					Esc to reset focus.
				
			
			
			
			
		
	);
};

const Item = ({label, id}) => {
	const {isFocused} = useFocus({id});

	return (
		
			{label} {isFocused && (focused)}
		
	);
};

render();

Ink render to string

import {render} from "../../src"; import createStdout from "./create-stdout"; export const renderToString: ( node: JSX.Element, options?: {columns: number} ) => string = (node, options = {columns: 100}) => { const stdout = createStdout(options.column

Ink use input

"use strict"; const React = require("react"); const {render, useInput, useApp, Box, Text} = require("../.."); const Robot = () => { const {exit} = useApp(); const [x, setX] = React.useState(1); const [y, setY] = React.useState(1); useInput((input,

Ink clear

import React from "react"; import {Box, Text, render} from "../.."; const Clear = () => ( <Box flexDirection="column"> <Text>A</Text> <Text>B</Text> <Text>C</Text> </Box> ); const {clear} = render(<Clear />); clear();