ink 6.0.1 → 6.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/components/BackgroundContext.d.ts +4 -0
- package/build/components/BackgroundContext.js +3 -0
- package/build/components/BackgroundContext.js.map +1 -0
- package/build/components/Box.d.ts +1 -0
- package/build/components/Box.js +9 -2
- package/build/components/Box.js.map +1 -1
- package/build/components/Text.js +7 -3
- package/build/components/Text.js.map +1 -1
- package/build/hooks/use-input.js +1 -1
- package/build/hooks/use-input.js.map +1 -1
- package/build/render-background.d.ts +4 -0
- package/build/render-background.js +25 -0
- package/build/render-background.js.map +1 -0
- package/build/render-node-to-output.js +2 -0
- package/build/render-node-to-output.js.map +1 -1
- package/build/styles.d.ts +6 -0
- package/build/styles.js.map +1 -1
- package/package.json +1 -1
- package/readme.md +53 -6
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
import { type LiteralUnion } from 'type-fest';
|
|
2
|
+
import { type ForegroundColorName } from 'ansi-styles';
|
|
3
|
+
export type BackgroundColor = LiteralUnion<ForegroundColorName, string>;
|
|
4
|
+
export declare const backgroundContext: import("react").Context<BackgroundColor | undefined>;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"BackgroundContext.js","sourceRoot":"","sources":["../../src/components/BackgroundContext.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,aAAa,EAAC,MAAM,OAAO,CAAC;AAMpC,MAAM,CAAC,MAAM,iBAAiB,GAAG,aAAa,CAC7C,SAAS,CACT,CAAC"}
|
|
@@ -56,6 +56,7 @@ declare const Box: React.ForwardRefExoticComponent<{
|
|
|
56
56
|
readonly overflow?: "visible" | "hidden" | undefined;
|
|
57
57
|
readonly overflowX?: "visible" | "hidden" | undefined;
|
|
58
58
|
readonly overflowY?: "visible" | "hidden" | undefined;
|
|
59
|
+
readonly backgroundColor?: import("type-fest").LiteralUnion<import("ansi-styles").ForegroundColorName, string> | undefined;
|
|
59
60
|
} & {
|
|
60
61
|
children?: React.ReactNode | undefined;
|
|
61
62
|
} & React.RefAttributes<DOMElement>>;
|
package/build/components/Box.js
CHANGED
|
@@ -1,17 +1,24 @@
|
|
|
1
1
|
import React, { forwardRef } from 'react';
|
|
2
|
+
import { backgroundContext } from './BackgroundContext.js';
|
|
2
3
|
/**
|
|
3
4
|
* `<Box>` is an essential Ink component to build your layout. It's like `<div style="display: flex">` in the browser.
|
|
4
5
|
*/
|
|
5
|
-
const Box = forwardRef(({ children, ...style }, ref) => {
|
|
6
|
-
|
|
6
|
+
const Box = forwardRef(({ children, backgroundColor, ...style }, ref) => {
|
|
7
|
+
const boxElement = (React.createElement("ink-box", { ref: ref, style: {
|
|
7
8
|
flexWrap: 'nowrap',
|
|
8
9
|
flexDirection: 'row',
|
|
9
10
|
flexGrow: 0,
|
|
10
11
|
flexShrink: 1,
|
|
11
12
|
...style,
|
|
13
|
+
backgroundColor,
|
|
12
14
|
overflowX: style.overflowX ?? style.overflow ?? 'visible',
|
|
13
15
|
overflowY: style.overflowY ?? style.overflow ?? 'visible',
|
|
14
16
|
} }, children));
|
|
17
|
+
// If this Box has a background color, provide it to children via context
|
|
18
|
+
if (backgroundColor) {
|
|
19
|
+
return (React.createElement(backgroundContext.Provider, { value: backgroundColor }, boxElement));
|
|
20
|
+
}
|
|
21
|
+
return boxElement;
|
|
15
22
|
});
|
|
16
23
|
Box.displayName = 'Box';
|
|
17
24
|
export default Box;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Box.js","sourceRoot":"","sources":["../../src/components/Box.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAC,UAAU,EAAyB,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"Box.js","sourceRoot":"","sources":["../../src/components/Box.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAC,UAAU,EAAyB,MAAM,OAAO,CAAC;AAIhE,OAAO,EAAC,iBAAiB,EAAC,MAAM,wBAAwB,CAAC;AAIzD;;GAEG;AACH,MAAM,GAAG,GAAG,UAAU,CACrB,CAAC,EAAC,QAAQ,EAAE,eAAe,EAAE,GAAG,KAAK,EAAC,EAAE,GAAG,EAAE,EAAE;IAC9C,MAAM,UAAU,GAAG,CAClB,iCACC,GAAG,EAAE,GAAG,EACR,KAAK,EAAE;YACN,QAAQ,EAAE,QAAQ;YAClB,aAAa,EAAE,KAAK;YACpB,QAAQ,EAAE,CAAC;YACX,UAAU,EAAE,CAAC;YACb,GAAG,KAAK;YACR,eAAe;YACf,SAAS,EAAE,KAAK,CAAC,SAAS,IAAI,KAAK,CAAC,QAAQ,IAAI,SAAS;YACzD,SAAS,EAAE,KAAK,CAAC,SAAS,IAAI,KAAK,CAAC,QAAQ,IAAI,SAAS;SACzD,IAEA,QAAQ,CACA,CACV,CAAC;IAEF,yEAAyE;IACzE,IAAI,eAAe,EAAE,CAAC;QACrB,OAAO,CACN,oBAAC,iBAAiB,CAAC,QAAQ,IAAC,KAAK,EAAE,eAAe,IAChD,UAAU,CACiB,CAC7B,CAAC;IACH,CAAC;IAED,OAAO,UAAU,CAAC;AACnB,CAAC,CACD,CAAC;AAEF,GAAG,CAAC,WAAW,GAAG,KAAK,CAAC;AAExB,eAAe,GAAG,CAAC"}
|
package/build/components/Text.js
CHANGED
|
@@ -1,10 +1,12 @@
|
|
|
1
|
-
import React from 'react';
|
|
1
|
+
import React, { useContext } from 'react';
|
|
2
2
|
import chalk from 'chalk';
|
|
3
3
|
import colorize from '../colorize.js';
|
|
4
|
+
import { backgroundContext } from './BackgroundContext.js';
|
|
4
5
|
/**
|
|
5
6
|
* This component can display text, and change its style to make it colorful, bold, underline, italic or strikethrough.
|
|
6
7
|
*/
|
|
7
8
|
export default function Text({ color, backgroundColor, dimColor = false, bold = false, italic = false, underline = false, strikethrough = false, inverse = false, wrap = 'wrap', children, }) {
|
|
9
|
+
const inheritedBackgroundColor = useContext(backgroundContext);
|
|
8
10
|
if (children === undefined || children === null) {
|
|
9
11
|
return null;
|
|
10
12
|
}
|
|
@@ -15,8 +17,10 @@ export default function Text({ color, backgroundColor, dimColor = false, bold =
|
|
|
15
17
|
if (color) {
|
|
16
18
|
children = colorize(children, color, 'foreground');
|
|
17
19
|
}
|
|
18
|
-
|
|
19
|
-
|
|
20
|
+
// Use explicit backgroundColor if provided, otherwise use inherited from parent Box
|
|
21
|
+
const effectiveBackgroundColor = backgroundColor ?? inheritedBackgroundColor;
|
|
22
|
+
if (effectiveBackgroundColor) {
|
|
23
|
+
children = colorize(children, effectiveBackgroundColor, 'background');
|
|
20
24
|
}
|
|
21
25
|
if (bold) {
|
|
22
26
|
children = chalk.bold(children);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Text.js","sourceRoot":"","sources":["../../src/components/Text.tsx"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"Text.js","sourceRoot":"","sources":["../../src/components/Text.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAC,UAAU,EAAiB,MAAM,OAAO,CAAC;AACxD,OAAO,KAAiC,MAAM,OAAO,CAAC;AAEtD,OAAO,QAAQ,MAAM,gBAAgB,CAAC;AAEtC,OAAO,EAAC,iBAAiB,EAAC,MAAM,wBAAwB,CAAC;AAqDzD;;GAEG;AACH,MAAM,CAAC,OAAO,UAAU,IAAI,CAAC,EAC5B,KAAK,EACL,eAAe,EACf,QAAQ,GAAG,KAAK,EAChB,IAAI,GAAG,KAAK,EACZ,MAAM,GAAG,KAAK,EACd,SAAS,GAAG,KAAK,EACjB,aAAa,GAAG,KAAK,EACrB,OAAO,GAAG,KAAK,EACf,IAAI,GAAG,MAAM,EACb,QAAQ,GACD;IACP,MAAM,wBAAwB,GAAG,UAAU,CAAC,iBAAiB,CAAC,CAAC;IAC/D,IAAI,QAAQ,KAAK,SAAS,IAAI,QAAQ,KAAK,IAAI,EAAE,CAAC;QACjD,OAAO,IAAI,CAAC;IACb,CAAC;IAED,MAAM,SAAS,GAAG,CAAC,QAAgB,EAAU,EAAE;QAC9C,IAAI,QAAQ,EAAE,CAAC;YACd,QAAQ,GAAG,KAAK,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;QAChC,CAAC;QAED,IAAI,KAAK,EAAE,CAAC;YACX,QAAQ,GAAG,QAAQ,CAAC,QAAQ,EAAE,KAAK,EAAE,YAAY,CAAC,CAAC;QACpD,CAAC;QAED,oFAAoF;QACpF,MAAM,wBAAwB,GAC7B,eAAe,IAAI,wBAAwB,CAAC;QAC7C,IAAI,wBAAwB,EAAE,CAAC;YAC9B,QAAQ,GAAG,QAAQ,CAAC,QAAQ,EAAE,wBAAwB,EAAE,YAAY,CAAC,CAAC;QACvE,CAAC;QAED,IAAI,IAAI,EAAE,CAAC;YACV,QAAQ,GAAG,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;QACjC,CAAC;QAED,IAAI,MAAM,EAAE,CAAC;YACZ,QAAQ,GAAG,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;QACnC,CAAC;QAED,IAAI,SAAS,EAAE,CAAC;YACf,QAAQ,GAAG,KAAK,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC;QACtC,CAAC;QAED,IAAI,aAAa,EAAE,CAAC;YACnB,QAAQ,GAAG,KAAK,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;QAC1C,CAAC;QAED,IAAI,OAAO,EAAE,CAAC;YACb,QAAQ,GAAG,KAAK,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC;QACpC,CAAC;QAED,OAAO,QAAQ,CAAC;IACjB,CAAC,CAAC;IAEF,OAAO,CACN,kCACC,KAAK,EAAE,EAAC,QAAQ,EAAE,CAAC,EAAE,UAAU,EAAE,CAAC,EAAE,aAAa,EAAE,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAC,EACzE,kBAAkB,EAAE,SAAS,IAE5B,QAAQ,CACC,CACX,CAAC;AACH,CAAC"}
|
package/build/hooks/use-input.js
CHANGED
|
@@ -80,7 +80,7 @@ const useInput = (inputHandler, options = {}) => {
|
|
|
80
80
|
}
|
|
81
81
|
// If app is not supposed to exit on Ctrl+C, then let input listener handle it
|
|
82
82
|
if (!(input === 'c' && key.ctrl) || !internal_exitOnCtrlC) {
|
|
83
|
-
// @ts-expect-error TypeScript types for `batchedUpdates` require an argument, but React's codebase doesn't provide it and it works without it as
|
|
83
|
+
// @ts-expect-error TypeScript types for `batchedUpdates` require an argument, but React's codebase doesn't provide it and it works without it as expected.
|
|
84
84
|
reconciler.batchedUpdates(() => {
|
|
85
85
|
inputHandler(input, key);
|
|
86
86
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-input.js","sourceRoot":"","sources":["../../src/hooks/use-input.ts"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"file":"use-input.js","sourceRoot":"","sources":["../../src/hooks/use-input.ts"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import colorize from './colorize.js';
|
|
2
|
+
const renderBackground = (x, y, node, output) => {
|
|
3
|
+
if (!node.style.backgroundColor) {
|
|
4
|
+
return;
|
|
5
|
+
}
|
|
6
|
+
const width = node.yogaNode.getComputedWidth();
|
|
7
|
+
const height = node.yogaNode.getComputedHeight();
|
|
8
|
+
// Calculate the actual content area considering borders
|
|
9
|
+
const leftBorderWidth = node.style.borderStyle && node.style.borderLeft !== false ? 1 : 0;
|
|
10
|
+
const rightBorderWidth = node.style.borderStyle && node.style.borderRight !== false ? 1 : 0;
|
|
11
|
+
const topBorderHeight = node.style.borderStyle && node.style.borderTop !== false ? 1 : 0;
|
|
12
|
+
const bottomBorderHeight = node.style.borderStyle && node.style.borderBottom !== false ? 1 : 0;
|
|
13
|
+
const contentWidth = width - leftBorderWidth - rightBorderWidth;
|
|
14
|
+
const contentHeight = height - topBorderHeight - bottomBorderHeight;
|
|
15
|
+
if (!(contentWidth > 0 && contentHeight > 0)) {
|
|
16
|
+
return;
|
|
17
|
+
}
|
|
18
|
+
// Create background fill for each row
|
|
19
|
+
const backgroundLine = colorize(' '.repeat(contentWidth), node.style.backgroundColor, 'background');
|
|
20
|
+
for (let row = 0; row < contentHeight; row++) {
|
|
21
|
+
output.write(x + leftBorderWidth, y + topBorderHeight + row, backgroundLine, { transformers: [] });
|
|
22
|
+
}
|
|
23
|
+
};
|
|
24
|
+
export default renderBackground;
|
|
25
|
+
//# sourceMappingURL=render-background.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"render-background.js","sourceRoot":"","sources":["../src/render-background.ts"],"names":[],"mappings":"AAAA,OAAO,QAAQ,MAAM,eAAe,CAAC;AAIrC,MAAM,gBAAgB,GAAG,CACxB,CAAS,EACT,CAAS,EACT,IAAa,EACb,MAAc,EACP,EAAE;IACT,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,eAAe,EAAE,CAAC;QACjC,OAAO;IACR,CAAC;IAED,MAAM,KAAK,GAAG,IAAI,CAAC,QAAS,CAAC,gBAAgB,EAAE,CAAC;IAChD,MAAM,MAAM,GAAG,IAAI,CAAC,QAAS,CAAC,iBAAiB,EAAE,CAAC;IAElD,wDAAwD;IACxD,MAAM,eAAe,GACpB,IAAI,CAAC,KAAK,CAAC,WAAW,IAAI,IAAI,CAAC,KAAK,CAAC,UAAU,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IACnE,MAAM,gBAAgB,GACrB,IAAI,CAAC,KAAK,CAAC,WAAW,IAAI,IAAI,CAAC,KAAK,CAAC,WAAW,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IACpE,MAAM,eAAe,GACpB,IAAI,CAAC,KAAK,CAAC,WAAW,IAAI,IAAI,CAAC,KAAK,CAAC,SAAS,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAClE,MAAM,kBAAkB,GACvB,IAAI,CAAC,KAAK,CAAC,WAAW,IAAI,IAAI,CAAC,KAAK,CAAC,YAAY,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAErE,MAAM,YAAY,GAAG,KAAK,GAAG,eAAe,GAAG,gBAAgB,CAAC;IAChE,MAAM,aAAa,GAAG,MAAM,GAAG,eAAe,GAAG,kBAAkB,CAAC;IAEpE,IAAI,CAAC,CAAC,YAAY,GAAG,CAAC,IAAI,aAAa,GAAG,CAAC,CAAC,EAAE,CAAC;QAC9C,OAAO;IACR,CAAC;IAED,sCAAsC;IACtC,MAAM,cAAc,GAAG,QAAQ,CAC9B,GAAG,CAAC,MAAM,CAAC,YAAY,CAAC,EACxB,IAAI,CAAC,KAAK,CAAC,eAAe,EAC1B,YAAY,CACZ,CAAC;IAEF,KAAK,IAAI,GAAG,GAAG,CAAC,EAAE,GAAG,GAAG,aAAa,EAAE,GAAG,EAAE,EAAE,CAAC;QAC9C,MAAM,CAAC,KAAK,CACX,CAAC,GAAG,eAAe,EACnB,CAAC,GAAG,eAAe,GAAG,GAAG,EACzB,cAAc,EACd,EAAC,YAAY,EAAE,EAAE,EAAC,CAClB,CAAC;IACH,CAAC;AACF,CAAC,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
|
|
@@ -5,6 +5,7 @@ import wrapText from './wrap-text.js';
|
|
|
5
5
|
import getMaxWidth from './get-max-width.js';
|
|
6
6
|
import squashTextNodes from './squash-text-nodes.js';
|
|
7
7
|
import renderBorder from './render-border.js';
|
|
8
|
+
import renderBackground from './render-background.js';
|
|
8
9
|
// If parent container is `<Box>`, text nodes will be treated as separate nodes in
|
|
9
10
|
// the tree and will have their own coordinates in the layout.
|
|
10
11
|
// To ensure text nodes are aligned correctly, take X and Y of the first text node
|
|
@@ -56,6 +57,7 @@ const renderNodeToOutput = (node, output, options) => {
|
|
|
56
57
|
}
|
|
57
58
|
let clipped = false;
|
|
58
59
|
if (node.nodeName === 'ink-box') {
|
|
60
|
+
renderBackground(x, y, node, output);
|
|
59
61
|
renderBorder(x, y, node, output);
|
|
60
62
|
const clipHorizontally = node.style.overflowX === 'hidden' || node.style.overflow === 'hidden';
|
|
61
63
|
const clipVertically = node.style.overflowY === 'hidden' || node.style.overflow === 'hidden';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"render-node-to-output.js","sourceRoot":"","sources":["../src/render-node-to-output.ts"],"names":[],"mappings":"AAAA,OAAO,UAAU,MAAM,aAAa,CAAC;AACrC,OAAO,YAAY,MAAM,eAAe,CAAC;AACzC,OAAO,IAAI,MAAM,aAAa,CAAC;AAC/B,OAAO,QAAQ,MAAM,gBAAgB,CAAC;AACtC,OAAO,WAAW,MAAM,oBAAoB,CAAC;AAC7C,OAAO,eAAe,MAAM,wBAAwB,CAAC;AACrD,OAAO,YAAY,MAAM,oBAAoB,CAAC;
|
|
1
|
+
{"version":3,"file":"render-node-to-output.js","sourceRoot":"","sources":["../src/render-node-to-output.ts"],"names":[],"mappings":"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"}
|
package/build/styles.d.ts
CHANGED
|
@@ -238,6 +238,12 @@ export type Styles = {
|
|
|
238
238
|
* @default 'visible'
|
|
239
239
|
*/
|
|
240
240
|
readonly overflowY?: 'visible' | 'hidden';
|
|
241
|
+
/**
|
|
242
|
+
* Background color for the element.
|
|
243
|
+
*
|
|
244
|
+
* Accepts the same values as `color` in the `<Text>` component.
|
|
245
|
+
*/
|
|
246
|
+
readonly backgroundColor?: LiteralUnion<ForegroundColorName, string>;
|
|
241
247
|
};
|
|
242
248
|
declare const styles: (node: YogaNode, style?: Styles) => void;
|
|
243
249
|
export default styles;
|
package/build/styles.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../src/styles.ts"],"names":[],"mappings":"AAIA,OAAO,IAA6B,MAAM,aAAa,CAAC;
|
|
1
|
+
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../src/styles.ts"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
package/readme.md
CHANGED
|
@@ -69,14 +69,15 @@ render(<Counter />);
|
|
|
69
69
|
|
|
70
70
|
<img src="media/demo.svg" width="600">
|
|
71
71
|
|
|
72
|
-
You can also check it out live on [repl.it sandbox](https://ink-counter-demo.vadimdemedes.repl.run/).
|
|
73
72
|
Feel 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).
|
|
74
73
|
|
|
75
74
|
## Who's Using Ink?
|
|
76
75
|
|
|
77
|
-
- [Codex](https://github.com/openai/codex) - An
|
|
78
|
-
- [Claude Code](https://github.com/anthropics/claude-code) - An agentic coding tool made by Anthropic.
|
|
76
|
+
- [Codex](https://github.com/openai/codex) - An agentic coding tool, made by OpenAI.
|
|
77
|
+
- [Claude Code](https://github.com/anthropics/claude-code) - An agentic coding tool, made by Anthropic.
|
|
78
|
+
- [Gemini CLI](https://github.com/google-gemini/gemini-cli) - An agentic coding tool, made by Google.
|
|
79
79
|
- [GitHub Copilot for CLI](https://githubnext.com/projects/copilot-cli) - Just say what you want the shell to do.
|
|
80
|
+
- [Canva CLI](https://www.canva.dev/docs/apps/canva-cli/) - CLI for creating and managing Canva Apps.
|
|
80
81
|
- [Cloudflare's Wrangler](https://github.com/cloudflare/wrangler2) - The CLI for Cloudflare Workers.
|
|
81
82
|
- [Linear](https://linear.app) - Linear built an internal CLI for managing deployments, configs and other housekeeping tasks.
|
|
82
83
|
- [Gatsby](https://www.gatsbyjs.org) - Gatsby is a modern web framework for blazing fast websites.
|
|
@@ -1155,6 +1156,52 @@ Default: `true`
|
|
|
1155
1156
|
|
|
1156
1157
|
Determines whether left border is visible.
|
|
1157
1158
|
|
|
1159
|
+
#### Background
|
|
1160
|
+
|
|
1161
|
+
##### backgroundColor
|
|
1162
|
+
|
|
1163
|
+
Type: `string`
|
|
1164
|
+
|
|
1165
|
+
Background color for the element.
|
|
1166
|
+
|
|
1167
|
+
Accepts the same values as [`color`](#color) in the `<Text>` component.
|
|
1168
|
+
|
|
1169
|
+
```jsx
|
|
1170
|
+
<Box flexDirection="column">
|
|
1171
|
+
<Box backgroundColor="red" width={20} height={5} alignSelf="flex-start">
|
|
1172
|
+
<Text>Red background</Text>
|
|
1173
|
+
</Box>
|
|
1174
|
+
|
|
1175
|
+
<Box backgroundColor="#FF8800" width={20} height={3} marginTop={1} alignSelf="flex-start">
|
|
1176
|
+
<Text>Orange background</Text>
|
|
1177
|
+
</Box>
|
|
1178
|
+
|
|
1179
|
+
<Box backgroundColor="rgb(0, 255, 0)" width={20} height={3} marginTop={1} alignSelf="flex-start">
|
|
1180
|
+
<Text>Green background</Text>
|
|
1181
|
+
</Box>
|
|
1182
|
+
</Box>
|
|
1183
|
+
```
|
|
1184
|
+
|
|
1185
|
+
The background color fills the entire `<Box>` area and is inherited by child `<Text>` components unless they specify their own `backgroundColor`.
|
|
1186
|
+
|
|
1187
|
+
```jsx
|
|
1188
|
+
<Box backgroundColor="blue" alignSelf="flex-start">
|
|
1189
|
+
<Text>Blue inherited </Text>
|
|
1190
|
+
<Text backgroundColor="yellow">Yellow override </Text>
|
|
1191
|
+
<Text>Blue inherited again</Text>
|
|
1192
|
+
</Box>
|
|
1193
|
+
```
|
|
1194
|
+
|
|
1195
|
+
Background colors work with borders and padding:
|
|
1196
|
+
|
|
1197
|
+
```jsx
|
|
1198
|
+
<Box backgroundColor="cyan" borderStyle="round" padding={1} alignSelf="flex-start">
|
|
1199
|
+
<Text>Background with border and padding</Text>
|
|
1200
|
+
</Box>
|
|
1201
|
+
```
|
|
1202
|
+
|
|
1203
|
+
See example in [examples/box-backgrounds](examples/box-backgrounds/box-backgrounds.tsx).
|
|
1204
|
+
|
|
1158
1205
|
### `<Newline>`
|
|
1159
1206
|
|
|
1160
1207
|
Adds one or more newline (`\n`) characters.
|
|
@@ -2100,7 +2147,7 @@ npx react-devtools
|
|
|
2100
2147
|
```
|
|
2101
2148
|
|
|
2102
2149
|
After it starts up, you should see the component tree of your CLI.
|
|
2103
|
-
You can even inspect and change the props of components, and see the results
|
|
2150
|
+
You can even inspect and change the props of components, and see the results immediately in the CLI, without restarting it.
|
|
2104
2151
|
|
|
2105
2152
|
**Note**: You must manually quit your CLI via <kbd>Ctrl</kbd>+<kbd>C</kbd> after you're done testing.
|
|
2106
2153
|
|
|
@@ -2141,8 +2188,8 @@ npm run example examples/[example name]
|
|
|
2141
2188
|
# e.g. npm run example examples/borders
|
|
2142
2189
|
```
|
|
2143
2190
|
|
|
2144
|
-
- [Jest](examples/jest/jest.tsx) - Implementation of basic Jest UI
|
|
2145
|
-
- [Counter](examples/counter/counter.tsx) - Simple counter that increments every 100ms
|
|
2191
|
+
- [Jest](examples/jest/jest.tsx) - Implementation of basic Jest UI.
|
|
2192
|
+
- [Counter](examples/counter/counter.tsx) - Simple counter that increments every 100ms.
|
|
2146
2193
|
- [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).
|
|
2147
2194
|
- [Borders](examples/borders/borders.tsx) - Add borders to `<Box>` component.
|
|
2148
2195
|
- [Suspense](examples/suspense/suspense.tsx) - Use React Suspense.
|