v4.4.1

Highlights

• Fix React Devtools integration (#626) 3d02a16
• Fix inability to read user input after app exit (#622) 45dcc1e
• Fix broken link escapes (#623) adc2c0c

v4.4.0...v4.4.1

v4.4.0

Highlights

• Add index property to Transform (#619) 0ee8e89
• Use readable event instead of data to read from stdin (#616) 814f33e

Credits

Thanks to @isaacs and @matteodepalo for contributing to this release!

v4.3.1...v4.4.0

v4.3.1

This release brings back compatibility with Node.js v14.x. See #617 for details. Thanks @newhouse and @AlCalzone for handling it!

v4.3.0...v4.3.1

v4.3.0

Highlights

• Speed up generation of output (#564) 9ff4d20
• Dim border color (#582) 8a04760
• Batch state updates in useInput callback (#581) eed2a11

Thank you

Huge shoutout goes to @AlCalzone for performance improvements in the generation of output, which speeds up rendering and significantly reduces CPU usage 🔥

v4.2.0...v4.3.0

v4.2.0

New features

Custom border style

fb66872

With the addition of borderStyle prop to Box, you can define custom border style for rendering borders.

<Box
	borderStyle={{
		topLeft: '↘',
		top: '↓',
		topRight: '↙',
		left: '→',
		bottomLeft: '↗',
		bottom: '↑',
		bottomRight: '↖',
		right: '←'
	}}
>
	<Text>Content</Text>
</Box>

Individual colors for each border side

015202c

Box has supported borderColor prop for a while now to change the color of the border. In this release, there are new borderTopColor, borderBottomColor, borderLeftColor and borderRightColor props to change the color for each border side individually.

<Box
	borderStyle="single"
	borderTopColor="magenta"
	borderBottomColor="green"
	borderLeftColor="yellow"
	borderRightColor="cyan"
>
	<Text>So colorful</Text>
</Box>

Toggle visibility of individual border sides

3e0aeab

As you can see, this is a pretty border-themed release. Continuing with the trend, now you toggle visibility of any border side individually via borderTop, borderBottom, borderLeft and borderRight props.

For example, if you wanted to hide top and bottom borders, you'd pass false to borderTop and borderBottom props respectively.

<Box
	borderStyle="single"
	borderTop={false}
	borderBottom={false}
>
	<Text>Content</Text>
</Box>

Other changes

• Rework parsing keyboard input in useInput (#576) 6f99ca3
• Detect arrow keys when pressed together with meta key 8180c1c
• Fix tab key incorrectly having ctrl equal to true 26b8364
• Fix arrow and page up/down keys detected as meta keys (#573) 09261d5
• Improve diffing of styles (#566) 690d48c

v4.1.0...v4.2.0

v4.1.0

Highlights

Support for gap in Box

4a67772

Box supports gap prop now to easily add space between columns and rows without manually assigning margins. Similar to CSS, gap is a shorthand for setting both columnGap and rowGap at the same time.

<Box gap={1}>
	<Text>A</Text>
	<Text>B</Text>
</Box>
// A B

Wrapping of flex items

7bdbde5

@jodevsa contributed support for wrapping of flex items in via flexWrap prop, similar to flex-wrap CSS property.

<Box width={2} flexWrap="wrap">
	<Text>A</Text>
	<Text>BC</Text>
</Box>
// A
// B C

Customizable overflow behavior in Box

6278b81

Box supports an overflow prop, which controls the visibility of an element's overflow. It can be set to "visible" (default) and "hidden", which hides any content that overflows element's boundaries. Like in CSS, overflow is a shorthand for setting both overflowX and overflowY.

<Box width={6} overflow="hidden">
    <Box width={16} flexShrink={0}>
    	<Text>Hello World</Text>
    </Box>
</Box>
// Hello

WASM build of Yoga

c97a2ee

Thanks to @amitdahan, Ink now uses a WASM build of Yoga provided by the yoga-wasm-web package. Starting with this release, Ink no longer uses yoga-layout-prebuilt package that is lagging behind Yoga releases.

Faster rendering

e635106

@AlCalzone contributed an impressive performance boost (~150%) to slice-ansi, which Ink heavily uses for generating output before writing it to the terminal. This release updates Ink to use a newer version of slice-ansi, so this should translate to faster rendering in Ink as well.

Other changes

• Fix missing element dimensions (#561) 5f09368

v4.0.0...v4.1.0

v4.0.0

Breaking changes

• This package is now pure ESM. Please read this.
• Require Node.js 14.16 (#546) aaf45a1
• Require React 18. (#546) aaf45a1
• Delete support for hsl, hsv, hwb and ansi color formats in Text's color prop.
• Move react-devtools-core to optional peer dependency (#498) 8c2378a

Thank you

Major shoutout goes to @pepicrft and @amitdahan for leading the migration of Ink to ESM 💛

Thanks to @sindresorhus for support and helping reviewing these massive changes 👏

v3.2.0...v4.0.0

v3.2.0

Highlights

• Support React 17 5b10413
• Update ws dependency to fix a security alert 7fac58a

v3.1.0...v3.2.0

v3.1.0

Highlights

• Add programmatic focus (#427) 5809621

v3.0.9...v3.1.0

v3.0.9

Highlights

• Fix border rendering containing emojis and wide characters (#444) a8f563c
• Fix undefined errors for focusing unmounted elements (#404) deb9d96
• Fix the TypeScript definitions for the backgroundColor prop of the <Box> component (#451) 7a3b32d

v3.0.8...v3.0.9