Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add option to render using full available height (rows) #689

Open
wants to merge 1 commit into
base: master
Choose a base branch
from

Conversation

DanielSRS
Copy link

Currently if one wants to create an application that fills all available columns and rows, they need to create a component that listens to stdout size changes, like this:

import React from 'react';
import { Box, render, Text } from 'ink';
import useStdoutDimensions from 'ink-use-stdout-dimensions';

function Application() {
  const [columns, rows] = useStdoutDimensions();
  return (
    <Box width={columns} height={rows}>
      <Text>Content</Text>
    </Box>
  );
}

render(<Application />);

But ink already listens and recalculate layout when stdout resizes, but only for width (columns)

this PR adds an render option to also use height (rows) size when recalculating layout.

so, one only needs to pass an optional render option, like this:

import React from 'react';
import { render, Text } from 'ink';

function Application() {
  return (
    <Text>Content</Text>
  );
}

render(<Application />, {fullHeight: true});

Added:

  • fullHeight render option
  • an example that uses full height

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant