Skip to content

v4.1.0

Compare
Choose a tag to compare
@vadimdemedes vadimdemedes released this 26 Mar 13:32
· 43 commits to master since this release

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

v4.0.0...v4.1.0