` in the browser.\n\n```jsx\nimport {render, Box, Text} from 'ink';\n\nconst Example = () => (\n\t
\n\t\tThis is a box with margin\n\t\n);\n\nrender(
);\n```\n\n#### Dimensions\n\n##### width\n\nType: `number` `string`\n\nWidth of the element in spaces.\nYou can also set it in percent, which will calculate the width based on the width of parent element.\n\n```jsx\n
\n\tX\n\n//=> 'X '\n```\n\n```jsx\n
\n\t\n\t\tX\n\t\n\tY\n\n//=> 'X Y'\n```\n\n##### height\n\nType: `number` `string`\n\nHeight of the element in lines (rows).\nYou can also set it in percent, which will calculate the height based on the height of parent element.\n\n```jsx\n
\n\tX\n\n//=> 'X\\n\\n\\n'\n```\n\n```jsx\n
\n\t\n\t\tX\n\t\n\tY\n\n//=> 'X\\n\\n\\nY\\n\\n'\n```\n\n##### minWidth\n\nType: `number`\n\nSets a minimum width of the element.\nPercentages aren't supported yet, see https://github.com/facebook/yoga/issues/872.\n\n##### minHeight\n\nType: `number`\n\nSets a minimum height of the element.\nPercentages aren't supported yet, see https://github.com/facebook/yoga/issues/872.\n\n#### Padding\n\n##### paddingTop\n\nType: `number`\\\nDefault: `0`\n\nTop padding.\n\n##### paddingBottom\n\nType: `number`\\\nDefault: `0`\n\nBottom padding.\n\n##### paddingLeft\n\nType: `number`\\\nDefault: `0`\n\nLeft padding.\n\n##### paddingRight\n\nType: `number`\\\nDefault: `0`\n\nRight padding.\n\n##### paddingX\n\nType: `number`\\\nDefault: `0`\n\nHorizontal padding. Equivalent to setting `paddingLeft` and `paddingRight`.\n\n##### paddingY\n\nType: `number`\\\nDefault: `0`\n\nVertical padding. Equivalent to setting `paddingTop` and `paddingBottom`.\n\n##### padding\n\nType: `number`\\\nDefault: `0`\n\nPadding on all sides. Equivalent to setting `paddingTop`, `paddingBottom`, `paddingLeft` and `paddingRight`.\n\n```jsx\n
Top\n
Bottom\n
Left\n
Right\n
Left and right\n
Top and bottom\n
Top, bottom, left and right\n```\n\n#### Margin\n\n##### marginTop\n\nType: `number`\\\nDefault: `0`\n\nTop margin.\n\n##### marginBottom\n\nType: `number`\\\nDefault: `0`\n\nBottom margin.\n\n##### marginLeft\n\nType: `number`\\\nDefault: `0`\n\nLeft margin.\n\n##### marginRight\n\nType: `number`\\\nDefault: `0`\n\nRight margin.\n\n##### marginX\n\nType: `number`\\\nDefault: `0`\n\nHorizontal margin. Equivalent to setting `marginLeft` and `marginRight`.\n\n##### marginY\n\nType: `number`\\\nDefault: `0`\n\nVertical margin. Equivalent to setting `marginTop` and `marginBottom`.\n\n##### margin\n\nType: `number`\\\nDefault: `0`\n\nMargin on all sides. Equivalent to setting `marginTop`, `marginBottom`, `marginLeft` and `marginRight`.\n\n```jsx\n
Top\n
Bottom\n
Left\n
Right\n
Left and right\n
Top and bottom\n
Top, bottom, left and right\n```\n\n#### Gap\n\n#### gap\n\nType: `number`\\\nDefault: `0`\n\nSize of the gap between an element's columns and rows. Shorthand for `columnGap` and `rowGap`.\n\n```jsx\n
\n\tA\n\tB\n\tC\n\n// A B\n//\n// C\n```\n\n#### columnGap\n\nType: `number`\\\nDefault: `0`\n\nSize of the gap between an element's columns.\n\n```jsx\n
\n\tA\n\tB\n\n// A B\n```\n\n#### rowGap\n\nType: `number`\\\nDefault: `0`\n\nSize of the gap between element's rows.\n\n```jsx\n
\n\tA\n\tB\n\n// A\n//\n// B\n```\n\n#### Flex\n\n##### flexGrow\n\nType: `number`\\\nDefault: `0`\n\nSee [flex-grow](https://css-tricks.com/almanac/properties/f/flex-grow/).\n\n```jsx\n
\n\tLabel:\n\t\n\t\tFills all remaining space\n\t\n\n```\n\n##### flexShrink\n\nType: `number`\\\nDefault: `1`\n\nSee [flex-shrink](https://css-tricks.com/almanac/properties/f/flex-shrink/).\n\n```jsx\n
\n\t\n\t\tWill be 1/4\n\t\n\t\n\t\tWill be 3/4\n\t\n\n```\n\n##### flexBasis\n\nType: `number` `string`\n\nSee [flex-basis](https://css-tricks.com/almanac/properties/f/flex-basis/).\n\n```jsx\n
\n\t\n\t\tX\n\t\n\tY\n\n//=> 'X Y'\n```\n\n```jsx\n
\n\t\n\t\tX\n\t\n\tY\n\n//=> 'X Y'\n```\n\n##### flexDirection\n\nType: `string`\\\nAllowed values: `row` `row-reverse` `column` `column-reverse`\n\nSee [flex-direction](https://css-tricks.com/almanac/properties/f/flex-direction/).\n\n```jsx\n
\n\t\n\t\tX\n\t\n\tY\n\n// X Y\n\n
\n\tX\n\t\n\t\tY\n\t\n\n// Y X\n\n
\n\tX\n\tY\n\n// X\n// Y\n\n
\n\tX\n\tY\n\n// Y\n// X\n```\n\n##### flexWrap\n\nType: `string`\\\nAllowed values: `nowrap` `wrap` `wrap-reverse`\n\nSee [flex-wrap](https://css-tricks.com/almanac/properties/f/flex-wrap/).\n\n```jsx\n
\n\tA\n\tBC\n\n// A\n// B C\n```\n\n```jsx\n
\n\tA\n\tB\n\tC\n\n// A C\n// B\n```\n\n##### alignItems\n\nType: `string`\\\nAllowed values: `flex-start` `center` `flex-end`\n\nSee [align-items](https://css-tricks.com/almanac/properties/a/align-items/).\n\n```jsx\n
\n\t\n\t\tX\n\t\n\t\n\t\tA\n\t\t\n\t\tB\n\t\t\n\t\tC\n\t\n\n// X A\n// B\n// C\n\n
\n\t\n\t\tX\n\t\n\t\n\t\tA\n\t\t\n\t\tB\n\t\t\n\t\tC\n\t\n\n// A\n// X B\n// C\n\n
\n\t\n\t\tX\n\t\n\t\n\t\tA\n\t\t\n\t\tB\n\t\t\n\t\tC\n\t\n\n// A\n// B\n// X C\n```\n\n##### alignSelf\n\nType: `string`\\\nDefault: `auto`\\\nAllowed values: `auto` `flex-start` `center` `flex-end`\n\nSee [align-self](https://css-tricks.com/almanac/properties/a/align-self/).\n\n```jsx\n
\n\t\n\t\tX\n\t\n\n// X\n//\n//\n\n
\n\t\n\t\tX\n\t\n\n//\n// X\n//\n\n
\n\t\n\t\tX\n\t\n\n//\n//\n// X\n```\n\n##### justifyContent\n\nType: `string`\\\nAllowed values: `flex-start` `center` `flex-end` `space-between` `space-around`\n\nSee [justify-content](https://css-tricks.com/almanac/properties/j/justify-content/).\n\n```jsx\n
\n\tX\n\n// [X ]\n\n
\n\tX\n\n// [ X ]\n\n
\n\tX\n\n// [ X]\n\n
\n\tX\n\tY\n\n// [X Y]\n\n
\n\tX\n\tY\n\n// [ X Y ]\n```\n\n#### Visibility\n\n##### display\n\nType: `string`\\\nAllowed values: `flex` `none`\\\nDefault: `flex`\n\nSet this property to `none` to hide the element.\n\n##### overflowX\n\nType: `string`\\\nAllowed values: `visible` `hidden`\\\nDefault: `visible`\n\nBehavior for an element's overflow in horizontal direction.\n\n##### overflowY\n\nType: `string`\\\nAllowed values: `visible` `hidden`\\\nDefault: `visible`\n\nBehavior for an element's overflow in vertical direction.\n\n##### overflow\n\nType: `string`\\\nAllowed values: `visible` `hidden`\\\nDefault: `visible`\n\nShortcut for setting `overflowX` and `overflowY` at the same time.\n\n#### Borders\n\n##### borderStyle\n\nType: `string`\\\nAllowed values: `single` `double` `round` `bold` `singleDouble` `doubleSingle` `classic` | `BoxStyle`\n\nAdd a border with a specified style.\nIf `borderStyle` is `undefined` (which it is by default), no border will be added.\nInk uses border styles from [`cli-boxes`](https://github.com/sindresorhus/cli-boxes) module.\n\n```jsx\n
\n\t\n\t\t\n\t\t\tsingle\n\t\t\n\n\t\t\n\t\t\tdouble\n\t\t\n\n\t\t\n\t\t\tround\n\t\t\n\n\t\t\n\t\t\tbold\n\t\t\n\t\n\n\t\n\t\t\n\t\t\tsingleDouble\n\t\t\n\n\t\t\n\t\t\tdoubleSingle\n\t\t\n\n\t\t\n\t\t\tclassic\n\t\t\n\t\n\n```\n\n
![](\"media/box-borderStyle.jpg\")
\n\nAlternatively, pass a custom border style like so:\n\n```jsx\n
\n\tCustom\n\n```\n\nSee example in [examples/borders](examples/borders/borders.tsx).\n\n##### borderColor\n\nType: `string`\n\nChange border color.\nShorthand for setting `borderTopColor`, `borderRightColor`, `borderBottomColor` and `borderLeftColor`.\n\n```jsx\n\n\tGreen Rounded Box\n\n```\n\n![](\"media/box-borderColor.jpg\")
\n\n##### borderTopColor\n\nType: `string`\n\nChange top border color.\nAccepts the same values as [`color`](#color) in `` component.\n\n```jsx\n\n\tHello world\n\n```\n\n##### borderRightColor\n\nType: `string`\n\nChange right border color.\nAccepts the same values as [`color`](#color) in `` component.\n\n```jsx\n\n\tHello world\n\n```\n\n##### borderRightColor\n\nType: `string`\n\nChange right border color.\nAccepts the same values as [`color`](#color) in `` component.\n\n```jsx\n\n\tHello world\n\n```\n\n##### borderBottomColor\n\nType: `string`\n\nChange bottom border color.\nAccepts the same values as [`color`](#color) in `` component.\n\n```jsx\n\n\tHello world\n\n```\n\n##### borderLeftColor\n\nType: `string`\n\nChange left border color.\nAccepts the same values as [`color`](#color) in `` component.\n\n```jsx\n\n\tHello world\n\n```\n\n##### borderDimColor\n\nType: `boolean`\\\nDefault: `false`\n\nDim the border color.\nShorthand for setting `borderTopDimColor`, `borderBottomDimColor`, `borderLeftDimColor` and `borderRightDimColor`.\n\n```jsx\n\n\tHello world\n\n```\n\n##### borderTopDimColor\n\nType: `boolean`\\\nDefault: `false`\n\nDim the top border color.\n\n```jsx\n\n\tHello world\n\n```\n\n##### borderBottomDimColor\n\nType: `boolean`\\\nDefault: `false`\n\nDim the bottom border color.\n\n```jsx\n\n\tHello world\n\n```\n\n##### borderLeftDimColor\n\nType: `boolean`\\\nDefault: `false`\n\nDim the left border color.\n\n```jsx\n\n\tHello world\n\n```\n\n##### borderRightDimColor\n\nType: `boolean`\\\nDefault: `false`\n\nDim the right border color.\n\n```jsx\n\n\tHello world\n\n```\n\n##### borderTop\n\nType: `boolean`\\\nDefault: `true`\n\nDetermines whether top border is visible.\n\n##### borderRight\n\nType: `boolean`\\\nDefault: `true`\n\nDetermines whether right border is visible.\n\n##### borderBottom\n\nType: `boolean`\\\nDefault: `true`\n\nDetermines whether bottom border is visible.\n\n##### borderLeft\n\nType: `boolean`\\\nDefault: `true`\n\nDetermines whether left border is visible.\n\n### ``\n\nAdds one or more newline (`\\n`) characters.\nMust be used within `` components.\n\n#### count\n\nType: `number`\\\nDefault: `1`\n\nNumber of newlines to insert.\n\n```jsx\nimport {render, Text, Newline} from 'ink';\n\nconst Example = () => (\n\t\n\t\tHello\n\t\t\n\t\tWorld\n\t\n);\n\nrender();\n```\n\nOutput:\n\n```\nHello\nWorld\n```\n\n### ``\n\nA flexible space that expands along the major axis of its containing layout.\nIt's useful as a shortcut for filling all the available spaces between elements.\n\nFor example, using `` in a `` with default flex direction (`row`) will position \"Left\" on the left side and will push \"Right\" to the right side.\n\n```jsx\nimport {render, Box, Text, Spacer} from 'ink';\n\nconst Example = () => (\n\t\n\t\tLeft\n\t\t\n\t\tRight\n\t\n);\n\nrender();\n```\n\nIn a vertical flex direction (`column`), it will position \"Top\" to the top of the container and push \"Bottom\" to the bottom of it.\nNote, that container needs to be tall to enough to see this in effect.\n\n```jsx\nimport {render, Box, Text, Spacer} from 'ink';\n\nconst Example = () => (\n\t\n\t\tTop\n\t\t\n\t\tBottom\n\t\n);\n\nrender();\n```\n\n### ``\n\n`` component permanently renders its output above everything else.\nIt's useful for displaying activity like completed tasks or logs - things that\nare not changing after they're rendered (hence the name \"Static\").\n\nIt's preferred to use `` for use cases like these, when you can't know\nor control the amount of items that need to be rendered.\n\nFor example, [Tap](https://github.com/tapjs/node-tap) uses `` to display\na list of completed tests. [Gatsby](https://github.com/gatsbyjs/gatsby) uses it\nto display a list of generated pages, while still displaying a live progress bar.\n\n```jsx\nimport React, {useState, useEffect} from 'react';\nimport {render, Static, Box, Text} from 'ink';\n\nconst Example = () => {\n\tconst [tests, setTests] = useState([]);\n\n\tuseEffect(() => {\n\t\tlet completedTests = 0;\n\t\tlet timer;\n\n\t\tconst run = () => {\n\t\t\t// Fake 10 completed tests\n\t\t\tif (completedTests++ < 10) {\n\t\t\t\tsetTests(previousTests => [\n\t\t\t\t\t...previousTests,\n\t\t\t\t\t{\n\t\t\t\t\t\tid: previousTests.length,\n\t\t\t\t\t\ttitle: `Test #${previousTests.length + 1}`\n\t\t\t\t\t}\n\t\t\t\t]);\n\n\t\t\t\tsetTimeout(run, 100);\n\t\t\t}\n\t\t};\n\n\t\trun();\n\n\t\treturn () => {\n\t\t\tclearTimeout(timer);\n\t\t};\n\t}, []);\n\n\treturn (\n\t\t<>\n\t\t\t{/* This part will be rendered once to the terminal */}\n\t\t\t\n\t\t\t\t{test => (\n\t\t\t\t\t\n\t\t\t\t\t\t✔ {test.title}\n\t\t\t\t\t\n\t\t\t\t)}\n\t\t\t\n\n\t\t\t{/* This part keeps updating as state changes */}\n\t\t\t\n\t\t\t\tCompleted tests: {tests.length}\n\t\t\t\n\t\t\n\t);\n};\n\nrender();\n```\n\n**Note:** `` only renders new items in `items` prop and ignores items\nthat were previously rendered. This means that when you add new items to `items`\narray, changes you make to previous items will not trigger a rerender.\n\nSee [examples/static](examples/static/static.tsx) for an example usage of `` component.\n\n#### items\n\nType: `Array`\n\nArray of items of any type to render using a function you pass as a component child.\n\n#### style\n\nType: `object`\n\nStyles to apply to a container of child elements.\nSee [``](#box) for supported properties.\n\n```jsx\n\n\t{...}\n\n```\n\n#### children(item)\n\nType: `Function`\n\nFunction that is called to render every item in `items` array.\nFirst argument is an item itself and second argument is index of that item in\n`items` array.\n\nNote that `key` must be assigned to the root component.\n\n```jsx\n\n\t{(item, index) => {\n\t\t// This function is called for every item in ['a', 'b', 'c']\n\t\t// `item` is 'a', 'b', 'c'\n\t\t// `index` is 0, 1, 2\n\t\treturn (\n\t\t\t\n\t\t\t\tItem: {item}\n\t\t\t\n\t\t);\n\t}}\n\n```\n\n### ``\n\nTransform a string representation of React components before they are written to output.\nFor example, you might want to apply a [gradient to text](https://github.com/sindresorhus/ink-gradient), [add a clickable link](https://github.com/sindresorhus/ink-link) or [create some text effects](https://github.com/sindresorhus/ink-big-text).\nThese use cases can't accept React nodes as input, they are expecting a string.\nThat's what `` component does, it gives you an output string of its child components and lets you transform it in any way.\n\n**Note:** `` must be applied only to `` children components and shouldn't change the dimensions of the output, otherwise layout will be incorrect.\n\n```jsx\nimport {render, Transform} from 'ink';\n\nconst Example = () => (\n\t output.toUpperCase()}>\n\t\tHello World\n\t\n);\n\nrender();\n```\n\nSince `transform` function converts all characters to upper case, final output that's rendered to the terminal will be \"HELLO WORLD\", not \"Hello World\".\n\nWhen the output wraps to multiple lines, it can be helpful to know which line is being processed.\n\nFor example, to implement a hanging indent component, you can indent all the lines except for the first.\n\n```jsx\nimport {render, Transform} from 'ink';\n\nconst HangingIndent = ({content, indent = 4, children, ...props}) => (\n\t\n\t\t\tindex === 0 ? line : ' '.repeat(indent) + line\n\t\t}\n\t\t{...props}\n\t>\n\t\t{children}\n\t\n);\n\nconst text =\n\t'WHEN I WROTE the following pages, or rather the bulk of them, ' +\n\t'I lived alone, in the woods, a mile from any neighbor, in a ' +\n\t'house which I had built myself, on the shore of Walden Pond, ' +\n\t'in Concord, Massachusetts, and earned my living by the labor ' +\n\t'of my hands only. I lived there two years and two months. At ' +\n\t'present I am a sojourner in civilized life again.';\n\n// Other text properties are allowed as well\nrender(\n\t\n\t\t{text}\n\t\n);\n```\n\n#### transform(outputLine, index)\n\nType: `Function`\n\nFunction which transforms children output.\nIt accepts children and must return transformed children too.\n\n##### children\n\nType: `string`\n\nOutput of child components.\n\n##### index\n\nType: `number`\n\nThe zero-indexed line number of the line currently being transformed.\n\n## Hooks\n\n### useInput(inputHandler, options?)\n\nThis hook is used for handling user input.\nIt's a more convenient alternative to using `useStdin` and listening to `data` events.\nThe callback you pass to `useInput` is called for each character when user enters any input.\nHowever, if user pastes text and it's more than one character, the callback will be called only once and the whole string will be passed as `input`.\nYou can find a full example of using `useInput` at [examples/use-input](examples/use-input/use-input.tsx).\n\n```jsx\nimport {useInput} from 'ink';\n\nconst UserInput = () => {\n\tuseInput((input, key) => {\n\t\tif (input === 'q') {\n\t\t\t// Exit program\n\t\t}\n\n\t\tif (key.leftArrow) {\n\t\t\t// Left arrow key pressed\n\t\t}\n\t});\n\n\treturn …\n};\n```\n\n#### inputHandler(input, key)\n\nType: `Function`\n\nThe handler function that you pass to `useInput` receives two arguments:\n\n##### input\n\nType: `string`\n\nThe input that the program received.\n\n##### key\n\nType: `object`\n\nHandy information about a key that was pressed.\n\n###### key.leftArrow\n\n###### key.rightArrow\n\n###### key.upArrow\n\n###### key.downArrow\n\nType: `boolean`\\\nDefault: `false`\n\nIf an arrow key was pressed, the corresponding property will be `true`.\nFor example, if user presses left arrow key, `key.leftArrow` equals `true`.\n\n###### key.return\n\nType: `boolean`\\\nDefault: `false`\n\nReturn (Enter) key was pressed.\n\n###### key.escape\n\nType: `boolean`\\\nDefault: `false`\n\nEscape key was pressed.\n\n###### key.ctrl\n\nType: `boolean`\\\nDefault: `false`\n\nCtrl key was pressed.\n\n###### key.shift\n\nType: `boolean`\\\nDefault: `false`\n\nShift key was pressed.\n\n###### key.tab\n\nType: `boolean`\\\nDefault: `false`\n\nTab key was pressed.\n\n###### key.backspace\n\nType: `boolean`\\\nDefault: `false`\n\nBackspace key was pressed.\n\n###### key.delete\n\nType: `boolean`\\\nDefault: `false`\n\nDelete key was pressed.\n\n###### key.pageDown\n\n###### key.pageUp\n\nType: `boolean`\\\nDefault: `false`\n\nIf Page Up or Page Down key was pressed, the corresponding property will be `true`.\nFor example, if user presses Page Down, `key.pageDown` equals `true`.\n\n###### key.meta\n\nType: `boolean`\\\nDefault: `false`\n\n[Meta key](https://en.wikipedia.org/wiki/Meta_key) was pressed.\n\n#### options\n\nType: `object`\n\n##### isActive\n\nType: `boolean`\\\nDefault: `true`\n\nEnable or disable capturing of user input.\nUseful when there are multiple `useInput` hooks used at once to avoid handling the same input several times.\n\n### useApp()\n\n`useApp` is a React hook, which exposes a method to manually exit the app (unmount).\n\n#### exit(error?)\n\nType: `Function`\n\nExit (unmount) the whole Ink app.\n\n##### error\n\nType: `Error`\n\nOptional error. If passed, [`waitUntilExit`](waituntilexit) will reject with that error.\n\n```js\nimport {useApp} from 'ink';\n\nconst Example = () => {\n\tconst {exit} = useApp();\n\n\t// Exit the app after 5 seconds\n\tuseEffect(() => {\n\t\tsetTimeout(() => {\n\t\t\texit();\n\t\t}, 5000);\n\t}, []);\n\n\treturn …\n};\n```\n\n### useStdin()\n\n`useStdin` is a React hook, which exposes stdin stream.\n\n#### stdin\n\nType: `stream.Readable`\\\nDefault: `process.stdin`\n\nStdin stream passed to `render()` in `options.stdin` or `process.stdin` by default.\nUseful if your app needs to handle user input.\n\n```js\nimport {useStdin} from 'ink';\n\nconst Example = () => {\n\tconst {stdin} = useStdin();\n\n\treturn …\n};\n```\n\n#### isRawModeSupported\n\nType: `boolean`\n\nA boolean flag determining if the current `stdin` supports `setRawMode`.\nA component using `setRawMode` might want to use `isRawModeSupported` to nicely fall back in environments where raw mode is not supported.\n\n```jsx\nimport {useStdin} from 'ink';\n\nconst Example = () => {\n\tconst {isRawModeSupported} = useStdin();\n\n\treturn isRawModeSupported ? (\n\t\t\n\t) : (\n\t\t\n\t);\n};\n```\n\n#### setRawMode(isRawModeEnabled)\n\nType: `function`\n\n##### isRawModeEnabled\n\nType: `boolean`\n\nSee [`setRawMode`](https://nodejs.org/api/tty.html#tty_readstream_setrawmode_mode).\nInk exposes this function to be able to handle Ctrl+C, that's why you should use Ink's `setRawMode` instead of `process.stdin.setRawMode`.\n\n**Warning:** This function will throw unless the current `stdin` supports `setRawMode`. Use [`isRawModeSupported`](#israwmodesupported) to detect `setRawMode` support.\n\n```js\nimport {useStdin} from 'ink';\n\nconst Example = () => {\n\tconst {setRawMode} = useStdin();\n\n\tuseEffect(() => {\n\t\tsetRawMode(true);\n\n\t\treturn () => {\n\t\t\tsetRawMode(false);\n\t\t};\n\t});\n\n\treturn …\n};\n```\n\n### useStdout()\n\n`useStdout` is a React hook, which exposes stdout stream, where Ink renders your app.\n\n#### stdout\n\nType: `stream.Writable`\\\nDefault: `process.stdout`\n\n```js\nimport {useStdout} from 'ink';\n\nconst Example = () => {\n\tconst {stdout} = useStdout();\n\n\treturn …\n};\n```\n\n#### write(data)\n\nWrite any string to stdout, while preserving Ink's output.\nIt's useful when you want to display some external information outside of Ink's rendering and ensure there's no conflict between the two.\nIt's similar to ``, except it can't accept components, it only works with strings.\n\n##### data\n\nType: `string`\n\nData to write to stdout.\n\n```js\nimport {useStdout} from 'ink';\n\nconst Example = () => {\n\tconst {write} = useStdout();\n\n\tuseEffect(() => {\n\t\t// Write a single message to stdout, above Ink's output\n\t\twrite('Hello from Ink to stdout\\n');\n\t}, []);\n\n\treturn …\n};\n```\n\nSee additional usage example in [examples/use-stdout](examples/use-stdout/use-stdout.tsx).\n\n### useStderr()\n\n`useStderr` is a React hook, which exposes stderr stream.\n\n#### stderr\n\nType: `stream.Writable`\\\nDefault: `process.stderr`\n\nStderr stream.\n\n```js\nimport {useStderr} from 'ink';\n\nconst Example = () => {\n\tconst {stderr} = useStderr();\n\n\treturn …\n};\n```\n\n#### write(data)\n\nWrite any string to stderr, while preserving Ink's output.\n\nIt's useful when you want to display some external information outside of Ink's rendering and ensure there's no conflict between the two.\nIt's similar to ``, except it can't accept components, it only works with strings.\n\n##### data\n\nType: `string`\n\nData to write to stderr.\n\n```js\nimport {useStderr} from 'ink';\n\nconst Example = () => {\n\tconst {write} = useStderr();\n\n\tuseEffect(() => {\n\t\t// Write a single message to stderr, above Ink's output\n\t\twrite('Hello from Ink to stderr\\n');\n\t}, []);\n\n\treturn …\n};\n```\n\n### useFocus(options?)\n\nComponent that uses `useFocus` hook becomes \"focusable\" to Ink, so when user presses Tab, Ink will switch focus to this component.\nIf there are multiple components that execute `useFocus` hook, focus will be given to them in the order that these components are rendered in.\nThis hook returns an object with `isFocused` boolean property, which determines if this component is focused or not.\n\n#### options\n\n##### autoFocus\n\nType: `boolean`\\\nDefault: `false`\n\nAuto focus this component, if there's no active (focused) component right now.\n\n##### isActive\n\nType: `boolean`\\\nDefault: `true`\n\nEnable or disable this component's focus, while still maintaining its position in the list of focusable components.\nThis is useful for inputs that are temporarily disabled.\n\n##### id\n\nType: `string`\\\nRequired: `false`\n\nSet a component's focus ID, which can be used to programmatically focus the component. This is useful for large interfaces with many focusable elements, to avoid having to cycle through all of them.\n\n```jsx\nimport {render, useFocus, Text} from 'ink';\n\nconst Example = () => {\n\tconst {isFocused} = useFocus();\n\n\treturn {isFocused ? 'I am focused' : 'I am not focused'};\n};\n\nrender();\n```\n\nSee example in [examples/use-focus](examples/use-focus/use-focus.tsx) and [examples/use-focus-with-id](examples/use-focus-with-id/use-focus-with-id.tsx).\n\n### useFocusManager()\n\nThis hook exposes methods to enable or disable focus management for all components or manually switch focus to next or previous components.\n\n#### enableFocus()\n\nEnable focus management for all components.\n\n**Note:** You don't need to call this method manually, unless you've disabled focus management. Focus management is enabled by default.\n\n```js\nimport {useFocusManager} from 'ink';\n\nconst Example = () => {\n\tconst {enableFocus} = useFocusManager();\n\n\tuseEffect(() => {\n\t\tenableFocus();\n\t}, []);\n\n\treturn …\n};\n```\n\n#### disableFocus()\n\nDisable focus management for all components.\nCurrently active component (if there's one) will lose its focus.\n\n```js\nimport {useFocusManager} from 'ink';\n\nconst Example = () => {\n\tconst {disableFocus} = useFocusManager();\n\n\tuseEffect(() => {\n\t\tdisableFocus();\n\t}, []);\n\n\treturn …\n};\n```\n\n#### focusNext()\n\nSwitch focus to the next focusable component.\nIf there's no active component right now, focus will be given to the first focusable component.\nIf active component is the last in the list of focusable components, focus will be switched to the first component.\n\n**Note:** Ink calls this method when user presses Tab.\n\n```js\nimport {useFocusManager} from 'ink';\n\nconst Example = () => {\n\tconst {focusNext} = useFocusManager();\n\n\tuseEffect(() => {\n\t\tfocusNext();\n\t}, []);\n\n\treturn …\n};\n```\n\n#### focusPrevious()\n\nSwitch focus to the previous focusable component.\nIf there's no active component right now, focus will be given to the first focusable component.\nIf active component is the first in the list of focusable components, focus will be switched to the last component.\n\n**Note:** Ink calls this method when user presses Shift+Tab.\n\n```js\nimport {useFocusManager} from 'ink';\n\nconst Example = () => {\n\tconst {focusPrevious} = useFocusManager();\n\n\tuseEffect(() => {\n\t\tfocusPrevious();\n\t}, []);\n\n\treturn …\n};\n```\n\n#### focus(id)\n\n##### id\n\nType: `string`\n\nSwitch focus to the component with the given [`id`](#id).\nIf there's no component with that ID, focus will be given to the next focusable component.\n\n```js\nimport {useFocusManager, useInput} from 'ink';\n\nconst Example = () => {\n\tconst {focus} = useFocusManager();\n\n\tuseInput(input => {\n\t\tif (input === 's') {\n\t\t\t// Focus the component with focus ID 'someId'\n\t\t\tfocus('someId');\n\t\t}\n\t});\n\n\treturn …\n};\n```\n\n## API\n\n#### render(tree, options?)\n\nReturns: [`Instance`](#instance)\n\nMount a component and render the output.\n\n##### tree\n\nType: `ReactElement`\n\n##### options\n\nType: `object`\n\n###### stdout\n\nType: `stream.Writable`\\\nDefault: `process.stdout`\n\nOutput stream where app will be rendered.\n\n###### stdin\n\nType: `stream.Readable`\\\nDefault: `process.stdin`\n\nInput stream where app will listen for input.\n\n###### exitOnCtrlC\n\nType: `boolean`\\\nDefault: `true`\n\nConfigure whether Ink should listen to Ctrl+C keyboard input and exit the app.\nThis is needed in case `process.stdin` is in [raw mode](https://nodejs.org/api/tty.html#tty_readstream_setrawmode_mode), because then Ctrl+C is ignored by default and process is expected to handle it manually.\n\n###### patchConsole\n\nType: `boolean`\\\nDefault: `true`\n\nPatch console methods to ensure console output doesn't mix with Ink output.\nWhen any of `console.*` methods are called (like `console.log()`), Ink intercepts their output, clears main output, renders output from the console method and then rerenders main output again.\nThat way both are visible and are not overlapping each other.\n\nThis functionality is powered by [patch-console](https://github.com/vadimdemedes/patch-console), so if you need to disable Ink's interception of output but want to build something custom, you can use it.\n\n###### debug\n\nType: `boolean`\\\nDefault: `false`\n\nIf `true`, each update will be rendered as a separate output, without replacing the previous one.\n\n#### Instance\n\nThis is the object that `render()` returns.\n\n##### rerender(tree)\n\nReplace previous root node with a new one or update props of the current root node.\n\n###### tree\n\nType: `ReactElement`\n\n```jsx\n// Update props of the root node\nconst {rerender} = render();\nrerender();\n\n// Replace root node\nconst {rerender} = render();\nrerender();\n```\n\n##### unmount()\n\nManually unmount the whole Ink app.\n\n```jsx\nconst {unmount} = render();\nunmount();\n```\n\n##### waitUntilExit()\n\nReturns a promise, which resolves when app is unmounted.\n\n```jsx\nconst {unmount, waitUntilExit} = render();\n\nsetTimeout(unmount, 1000);\n\nawait waitUntilExit(); // resolves after `unmount()` is called\n```\n\n##### clear()\n\nClear output.\n\n```jsx\nconst {clear} = render();\nclear();\n```\n\n#### measureElement(ref)\n\nMeasure the dimensions of a particular `` element.\nIt returns an object with `width` and `height` properties.\nThis function is useful when your component needs to know the amount of available space it has. You could use it when you need to change the layout based on the length of its content.\n\n**Note:** `measureElement()` returns correct results only after the initial render, when layout has been calculated. Until then, `width` and `height` equal to zero. It's recommended to call `measureElement()` in a `useEffect` hook, which fires after the component has rendered.\n\n##### ref\n\nType: `MutableRef`\n\nA reference to a `` element captured with a `ref` property.\nSee [Refs](https://reactjs.org/docs/refs-and-the-dom.html) for more information on how to capture references.\n\n```jsx\nimport {render, measureElement, Box, Text} from 'ink';\n\nconst Example = () => {\n\tconst ref = useRef();\n\n\tuseEffect(() => {\n\t\tconst {width, height} = measureElement(ref.current);\n\t\t// width = 100, height = 1\n\t}, []);\n\n\treturn (\n\t\t\n\t\t\t\n\t\t\t\tThis box will stretch to 100 width\n\t\t\t\n\t\t\n\t);\n};\n\nrender();\n```\n\n## Testing\n\nInk components are simple to test with [ink-testing-library](https://github.com/vadimdemedes/ink-testing-library).\nHere's a simple example that checks how component is rendered:\n\n```jsx\nimport React from 'react';\nimport {Text} from 'ink';\nimport {render} from 'ink-testing-library';\n\nconst Test = () => Hello World;\nconst {lastFrame} = render();\n\nlastFrame() === 'Hello World'; //=> true\n```\n\nCheck out [ink-testing-library](https://github.com/vadimdemedes/ink-testing-library) for more examples and full documentation.\n\n## Using React Devtools\n\n\n\nInk supports [React Devtools](https://github.com/facebook/react/tree/master/packages/react-devtools) out-of-the-box.\nTo enable integration with React Devtools in your Ink-based CLI, run it with `DEV=true` environment variable:\n\n```sh\nDEV=true my-cli\n```\n\nThen, start React Devtools itself:\n\n```sh\nnpx react-devtools\n```\n\nAfter it starts up, you should see the component tree of your CLI.\nYou can even inspect and change the props of components, and see the results immediatelly in the CLI, without restarting it.\n\n**Note**: You must manually quit your CLI via Ctrl+C after you're done testing.\n\n## Useful Components\n\n- [ink-text-input](https://github.com/vadimdemedes/ink-text-input) - Text input.\n- [ink-spinner](https://github.com/vadimdemedes/ink-spinner) - Spinner.\n- [ink-select-input](https://github.com/vadimdemedes/ink-select-input) - Select (dropdown) input.\n- [ink-link](https://github.com/sindresorhus/ink-link) - Link.\n- [ink-gradient](https://github.com/sindresorhus/ink-gradient) - Gradient color.\n- [ink-big-text](https://github.com/sindresorhus/ink-big-text) - Awesome text.\n- [ink-image](https://github.com/kevva/ink-image) - Display images inside the terminal.\n- [ink-tab](https://github.com/jdeniau/ink-tab) - Tab.\n- [ink-color-pipe](https://github.com/LitoMore/ink-color-pipe) - Create color text with simpler style strings.\n- [ink-multi-select](https://github.com/karaggeorge/ink-multi-select) - Select one or more values from a list\n- [ink-divider](https://github.com/JureSotosek/ink-divider) - A divider.\n- [ink-progress-bar](https://github.com/brigand/ink-progress-bar) - Progress bar.\n- [ink-table](https://github.com/maticzav/ink-table) - Table.\n- [ink-ascii](https://github.com/hexrcs/ink-ascii) - Awesome text component with more font choices, based on Figlet.\n- [ink-markdown](https://github.com/cameronhunter/ink-markdown) - Render syntax highlighted Markdown.\n- [ink-quicksearch-input](https://github.com/Eximchain/ink-quicksearch-input) - Select component with fast quicksearch-like navigation.\n- [ink-confirm-input](https://github.com/kevva/ink-confirm-input) - Yes/No confirmation input.\n- [ink-syntax-highlight](https://github.com/vsashyn/ink-syntax-highlight) - Code syntax highlighting.\n- [ink-form](https://github.com/lukasbach/ink-form) - Form.\n- [ink-task-list](https://github.com/privatenumber/ink-task-list) - Task list.\n\n## Useful Hooks\n\n- [ink-use-stdout-dimensions](https://github.com/cameronhunter/ink-monorepo/tree/master/packages/ink-use-stdout-dimensions) - Subscribe to stdout dimensions.\n\n## Examples\n\nThe [`examples`](/examples) directory contains a set of real examples. You can run them with:\n\n```bash\nnpm run example examples/[example name]\n# e.g. npm run example examples/borders\n```\n\n- [Jest](examples/jest/jest.tsx) - Implementation of basic Jest UI [(live demo)](https://ink-jest-demo.vadimdemedes.repl.run/).\n- [Counter](examples/counter/counter.tsx) - Simple counter that increments every 100ms [(live demo)](https://ink-counter-demo.vadimdemedes.repl.run/).\n- [Form with validation](https://github.com/final-form/rff-cli-example) - Manage form state using [Final Form](https://github.com/final-form/final-form#-final-form).\n- [Borders](examples/borders/borders.tsx) - Add borders to `` component.\n- [Suspense](examples/suspense/suspense.tsx) - Use React Suspense.\n- [Table](examples/table/table.tsx) - Render a table with multiple columns and rows.\n- [Focus management](examples/use-focus/use-focus.tsx) - Use `useFocus` hook to manage focus between components.\n- [User input](examples/use-input/use-input.tsx) - Listen to user input.\n- [Write to stdout](examples/use-stdout/use-stdout.tsx) - Write to stdout bypassing main Ink output.\n- [Write to stderr](examples/use-stderr/use-stderr.tsx) - Write to stderr bypassing main Ink output.\n- [Static](examples/static/static.tsx) - Use `` to render permanent output.\n- [Child process](examples/subprocess-output) - Render output from a child process.\n\n## Maintainers\n\n- [Vadim Demedes](https://github.com/vadimdemedes)\n- [Sindre Sorhus](https://github.com/sindresorhus)\n","_attachments":{},"homepage":"https://github.com/vadimdemedes/ink#readme","bugs":{"url":"https://github.com/vadimdemedes/ink/issues"},"license":"MIT"}![\"Ink\"](\"media/logo.png\"){kind=logo}
\n\t![\"WorkOS\"](\"https://vadimdemedes.com/github/workos.svg\")
\n\t\t\t![](\"media/demo.svg\")
\n\nYou can also check it out live on [repl.it sandbox](https://ink-counter-demo.vadimdemedes.repl.run/).\nFeel free to play around with the code and fork this repl at [https://repl.it/@vadimdemedes/ink-counter-demo](https://repl.it/@vadimdemedes/ink-counter-demo).\n\n## Who's Using Ink?\n\n- [GitHub Copilot for CLI](https://githubnext.com/projects/copilot-cli) - Just say what you want the shell to do.\n- [Cloudflare's Wrangler](https://github.com/cloudflare/wrangler2) - The CLI for Cloudflare Workers.\n- [Linear](https://linear.app) - Linear built an internal CLI for managing deployments, configs and other housekeeping tasks.\n- [Gatsby](https://www.gatsbyjs.org) - Gatsby is a modern web framework for blazing fast websites.\n- [tap](https://node-tap.org) - A Test-Anything-Protocol library for JavaScript.\n- [Terraform CDK](https://github.com/hashicorp/terraform-cdk) - CDK (Cloud Development Kit) for HashiCorp Terraform.\n- [Twilio's SIGNAL](https://github.com/twilio-labs/plugin-signal2020) - CLI for Twilio's SIGNAL conference. [Blog post](https://www.twilio.com/blog/building-conference-cli-in-react).\n- [Typewriter](https://github.com/segmentio/typewriter) - Generates strongly-typed [Segment](https://segment.com) analytics clients from arbitrary JSON Schema.\n- [Prisma](https://www.prisma.io) - The unified data layer for modern applications.\n- [Wallace](https://www.projectwallace.com) - Pretty CSS analytics.\n- [Blitz](https://blitzjs.com) - The Fullstack React Framework.\n- [New York Times](https://github.com/nytimes/kyt) - NYT uses Ink `kyt` - a toolkit that encapsulates and manages the configuration for web apps.\n- [tink](https://github.com/npm/tink) - Next-generation runtime and package manager.\n- [Inkle](https://github.com/jrr/inkle) - Wordle game.\n- [loki](https://github.com/oblador/loki) - Visual regression testing for Storybook.\n- [Bit](https://github.com/teambit/bit) - Build, distribute and collaborate on components.\n- [Remirror](https://github.com/remirror/remirror) - Your friendly, world-class editor toolkit.\n- [Prime](https://github.com/birkir/prime) - Open source GraphQL CMS.\n- [Splash](https://github.com/Shopify/polaris-react/tree/master/scripts/splash) - Observe the splash zone of a change across the Shopify's [Polaris](https://polaris.shopify.com) component library.\n- [emoj](https://github.com/sindresorhus/emoj) - Find relevant emojis.\n- [emma](https://github.com/maticzav/emma-cli) - Find and install npm packages.\n- [swiff](https://github.com/simple-integrated-marketing/swiff) - Multi-environment command line tools for time-saving web developers.\n- [share](https://github.com/marionebl/share-cli) - Quickly share files.\n- [Kubelive](https://github.com/ameerthehacker/kubelive) - CLI for Kubernetes to provide live data about the cluster and its resources.\n- [changelog-view](https://github.com/jdeniau/changelog-view) - View changelogs.\n- [cfpush](https://github.com/mamachanko/cfpush) - An interactive Cloud Foundry tutorial.\n- [startd](https://github.com/mgrip/startd) - Turn your React component into a web app.\n- [wiki-cli](https://github.com/hexrcs/wiki-cli) - Search Wikipedia and read summaries.\n- [garson](https://github.com/goliney/garson) - Build interactive config-based command-line interfaces.\n- [git-contrib-calendar](https://github.com/giannisp/git-contrib-calendar) - Display a contributions calendar for any git repository.\n- [gitgud](https://github.com/GitGud-org/GitGud) - An interactive command-line GUI for Git.\n- [Autarky](https://github.com/pranshuchittora/autarky) - Find and delete old `node_modules` directories in order to free up disk space.\n- [fast-cli](https://github.com/sindresorhus/fast-cli) - Test your download and upload speed.\n- [tasuku](https://github.com/privatenumber/tasuku) - Minimal task runner.\n- [mnswpr](https://github.com/mordv/mnswpr) - Minesweeper game.\n- [lrn](https://github.com/krychu/lrn) - Learning by repetition.\n- [turdle](https://github.com/mynameisankit/turdle) - Wordle game.\n- [Shopify CLI](https://github.com/Shopify/cli) - Build apps, themes, and storefronts for Shopify.\n- [ToDesktop CLI](https://www.todesktop.com/electron) - An all-in-one platform for building Electron apps.\n- [Walle](https://github.com/Pobepto/walle) - Full-featured crypto wallet for EVM networks.\n\n## Contents\n\n- [Getting Started](#getting-started)\n- [Components](#components)\n - [`![](\"media/text-color.jpg\")
\n\n#### backgroundColor\n\nType: `string`\n\nSame as `color` above, but for background.\n\n```jsx\n![](\"media/text-backgroundColor.jpg\")
\n\n#### dimColor\n\nType: `boolean`\\\nDefault: `false`\n\nDim the color (emit a small amount of light).\n\n```jsx\n![](\"media/text-dimColor.jpg\")
\n\n#### bold\n\nType: `boolean`\\\nDefault: `false`\n\nMake the text bold.\n\n#### italic\n\nType: `boolean`\\\nDefault: `false`\n\nMake the text italic.\n\n#### underline\n\nType: `boolean`\\\nDefault: `false`\n\nMake the text underlined.\n\n#### strikethrough\n\nType: `boolean`\\\nDefault: `false`\n\nMake the text crossed with a line.\n\n#### inverse\n\nType: `boolean`\\\nDefault: `false`\n\nInverse background and foreground colors.\n\n```jsx\n![](\"media/text-inverse.jpg\")
\n\n#### wrap\n\nType: `string`\\\nAllowed values: `wrap` `truncate` `truncate-start` `truncate-middle` `truncate-end`\\\nDefault: `wrap`\n\nThis property tells Ink to wrap or truncate text if its width is larger than container.\nIf `wrap` is passed (by default), Ink will wrap text and split it into multiple lines.\nIf `truncate-*` is passed, Ink will truncate text instead, which will result in one line of text with the rest cut off.\n\n```jsx\n