Question: Place element on last line of terminal

[Feuermurmel]

Is there a way to place output on the last line of the terminal, when the complete output of the application is shorter than the terminal height (e.g. just a few lines)?

My use case

I'm trying to create an application that uses an interface similar to GNU Readline-based applications

example.sh:

read -p "enter value: " value
echo "value: ${value}"

$ bash example.sh
enter value: hello
value: hello

IMHO, an important aspect of Readline's UI is that it will use the last line of the terminal, when there's enough input already before it:

I think this is important because users that regularly use Readline-based applications (like Bash or most other shells) will probably expect a prompt to be displayed on the last line of their terminal, while an output line that is followed by an empty line means the application is currently busy and not waiting for input. Example:

Another use-case would be to print something related to the input below the input line, e.g. what zsh does when the user uses the tab key to show completions:

[sindresorhus]

You can achieve this by using useWindowSize() to set the root <Box> height to the terminal height, and then using justifyContent="flex-end" to push content to the bottom:

import {Box, Text, useWindowSize} from "ink";

function App() {
	const {rows} = useWindowSize();

	return (
		<Box height={rows} flexDirection="column" justifyContent="flex-end">
			<Text>This will be at the bottom of the terminal</Text>
		</Box>
	);
}

You can also combine this with flexGrow on a spacer to have some content at the top and some at the bottom:

import {Box, Text, useWindowSize} from "ink";

function App() {
	const {rows} = useWindowSize();

	return (
		<Box height={rows} flexDirection="column">
			<Text>Content at top</Text>
			<Box flexGrow={1} />
			<Text>Prompt at bottom</Text>
		</Box>
	);
}

[Feuermurmel]

Thank you for the quick response!

I see two issues with this approach:

• When I render the <Box height={rows}>, all previously-visible output in the terminal window is pushed out into the scrollback buffer.

  Is the last line of the terminal treated as something special by ink? I.e. is there a reason it is not used unless the top-level component is as high or higher than the terminal window?

• When I exit the application, the scrollback buffer is cleared.

  I've read about this behavior in existing issues, but I don't understand why this is happening here, I thought this is only necessary if the output is larger than the terminal window? With the approach of using <Box height={rows}>, the output should only be exactly as big as the window.