Bot releases are visible (Hide)
Even though this release is major, it doesn't have any breaking changes. The reason it's 5.0.0 is because after #635, Ink requires Node.js 18.
Huge thanks to @sindresorhus for maintaining Ink 💛
index
property to Transform
(#619) 0ee8e89readable
event instead of data
to read from stdin (#616) 814f33eThanks to @isaacs and @matteodepalo for contributing to this release!
This release brings back compatibility with Node.js v14.x. See https://github.com/vadimdemedes/ink/issues/617 for details. Thanks @newhouse and @AlCalzone for handling it!
useInput
callback (#581) eed2a11Huge shoutout goes to @AlCalzone for performance improvements in the generation of output, which speeds up rendering and significantly reduces CPU usage 🔥
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>
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>
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>
useInput
(#576) 6f99ca3ctrl
equal to true
26b8364gap
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
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
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
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.
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.
hsl
, hsv
, hwb
and ansi
color formats in Text
's color
prop.react-devtools-core
to optional peer dependency (#498) 8c2378aMajor 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 👏
ws
dependency to fix a security alert 7fac58aundefined
errors for focusing unmounted elements (#404) deb9d96backgroundColor
prop of the <Box>
component (#451) 7a3b32d3.0.7
release) (#390) 1396566import type
statements 8389496borderColor
type (#379) ac28ae4useInput
(#364) 96568ddStatic
rendering stale items on unmount (#361) 6ae66e6useInput
handle Ctrl+C if exitOnCtrlC
is disabled (#353) 7de558einverse
prop to Text
component (#347) 8e8c1baDOMElement
type (#351) 950b1d2