How to make Box responsive?

[lariciamota]

Firstly congrats for creating Ink! You're really making CLI development simpler 👏

I'd like to know if there is any way to make Box component responsive. The problem I'm facing and would like to know how to fix is: when changing the size of the terminal window where Box is rendered, the Box is resized, but the previous box isn't being erased. (I'm using the latest release (v3.0.0) and iTerm2 - macOS)

[vadimdemedes]

Thank you, @lariciamota!

This is a known issue, which I've tried to solve before releasing Ink 3, but unfortunately couldn't fix it at the time. Layout gets broken if you resize down, but it should adjust fine if you resize terminal up. I'm going to give it a shot one more time!

[airtonix]

Like this:

Screencast from 12-11-22 13:56:00.webm

import React, { useEffect, useState } from "react";
import type { ReactNode, PropsWithChildren } from "react";

import { Box, useStdout } from "ink";

type LayoutProps = PropsWithChildren<{
  header?: ReactNode;
  footer?: ReactNode;
}>;

export function Layout({ header, children, footer }: LayoutProps) {
  const { stdout } = useStdout();
  const [width, setWidth] = useState(() => stdout.columns);
  const [height, setHeight] = useState(() => stdout.rows);

  useEffect(() => {
    const handleTerminalResize = () => {
      const { columns, rows } = Deno.consoleSize();
      setWidth(() => columns);
      setHeight(() => rows);
    };
    Deno.addSignalListener("SIGWINCH", handleTerminalResize);
    return () => {
      Deno.removeSignalListener("SIGWINCH", handleTerminalResize);
    };
  }, []);

  return (
    <Box
      flexDirection="column"
      height={height}
      width={width - 2}
      paddingY={1}
      marginX={1}
      flexShrink={0}
      flexGrow={1}
      alignItems="center"
      justifyContent="center"
    >
      <Box flexDirection="row" width="100%">
        {header}
      </Box>
      <Box flexDirection="column" flexGrow={1} width="100%">
        {children}
      </Box>
      <Box flexDirection="row" width="100%">
        {footer}
      </Box>
    </Box>
  );
}

• https://deno.land/[email protected]/examples/os_signals
• https://unix.stackexchange.com/a/580365/49317

---

actually implemented here :

• https://github.com/airtonix/youtube-music-tui/pull/3/files#diff-90753a7e3d7c2efd5e5609da05976dbe9e0fc565cbe3a12776462a219b9f6d1c
• https://github.com/airtonix/youtube-music-tui/pull/3/files#diff-f7126623e7e49274b1c8733a89f874ebefadbb71e46235093d58db3d97c133af
• https://github.com/airtonix/youtube-music-tui/pull/3/files#diff-9465d449810b559ad96165ba13b896797120e6e3a7ed09f4f96f4a01f29c1df9
• https://github.com/airtonix/youtube-music-tui/pull/3/files#diff-a79a5d1237c0e583e03cbd61a7646897dba329b018f4482d6830822a17a2944bR13
• https://github.com/airtonix/youtube-music-tui/pull/3/files#diff-862b91d98fb76bd060063cd5ca28adfe97562c037f29f46ed488a48bc8e1e985R6