prozacgod
commented
3 years ago I was making my own stuff and noticed this thread, I had just left this in the "alternative screen buffer" thread. This seems to work "well enough" for me at the moment. This doesn't protect against drawing too tall, but combine with https://github.com/vadimdemedes/ink/pull/393 and maybe it's simple enough solution?
const FullScreen: React.FC = (props) => {
const [size, setSize] = useState({
columns: process.stdout.columns,
rows: process.stdout.rows,
});
useEffect(() => {
function onResize() {
setSize({
columns: process.stdout.columns,
rows: process.stdout.rows,
});
}
process.stdout.on("resize", onResize);
process.stdout.write("\x1b[?1049h");
return () => {
process.stdout.off("resize", onResize);
process.stdout.write("\x1b[?1049l");
};
}, []);
return (
<Box width={size.columns} height={size.rows}>
{props.children}
</Box>
);
};(P.S. Does Ink allow for overlapping elements? like pop up windows, I'm kinda wanting to make a bit of a tui out of it)
vadimdemedes
Ink doesn't support rendering fullscreen UIs now. Because terminals can't re-render text that's taller than terminal's window height, Ink has to erase entire terminal screen and render the UI again. This isn't efficient.
There are two solutions known for this issue. Feel free to propose a third though!
Option 1
Enter alternative screen buffer as described here and render UI as usual. This doesn't particularly solve creating fullscreen UIs, but at least user's terminal history won't be erased by Ink, which is a big win.
Option 2
Add a
<Fullscreen>component that automatically stretches to 100% of terminal's width and height and resizes as necessary. For that to work, you'd need to:<Fullscreen>componentresizeevent and update component's dimensionsRelated issues: