v4.1.0
Highlights
Support for gap
in Box
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
@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
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
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
@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.