Ink Versions Save
🌈 React for interactive command-line apps
v4.4.1
8 months agov4.4.0
8 months agov4.3.1
9 months agoThis 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!
v4.3.0
9 months agoHighlights
- Speed up generation of output (#564) 9ff4d20
- Dim border color (#582) 8a04760
- Batch state updates in
useInputcallback (#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
1 year agoNew 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
ctrlequal totrue26b8364 - Fix arrow and page up/down keys detected as meta keys (#573) 09261d5
- Improve diffing of styles (#566) 690d48c
v4.1.0
1 year agoHighlights
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
1 year agoBreaking 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,hwbandansicolor formats inText'scolorprop. - Move
react-devtools-coreto 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 👏