Add inverse prop to Text component (#347)

readme.md

@@ -205,6 +205,7 @@ const Example = () => (
 		<Text italic>I am italic</Text>
 		<Text underline>I am underline</Text>
 		<Text strikethrough>I am strikethrough</Text>
+		<Text inverse>I am inversed</Text>
 	</>
 );
 
@@ -285,6 +286,21 @@ Default: `false`
 
 Make the text crossed with a line.
 
+#### inverse
+
+Type: `boolean`\
+Default: `false`
+
+Inverse background and foreground colors.
+
+```jsx
+<Text inverse color="yellow">
+	Inversed Yellow
+</Text>
+```
+
+<img src="media/text-inverse.jpg" width="138">
+
 #### wrap
 
 Type: `string`\

src/components/Text.tsx

@@ -42,6 +42,11 @@ export interface Props {
 	 */
 	readonly strikethrough?: boolean;
 
+	/**
+	 * Inverse background and foreground colors.
+	 */
+	readonly inverse?: boolean;
+
 	/**
 	 * This property tells Ink to wrap or truncate text if its width is larger than container.
 	 * If `wrap` is passed (by default), Ink will wrap text and split it into multiple lines.
@@ -62,6 +67,7 @@ const Text: FC<Props> = ({
 	italic,
 	underline,
 	strikethrough,
+	inverse,
 	wrap,
 	children
 }) => {
@@ -98,6 +104,10 @@ const Text: FC<Props> = ({
 			children = chalk.strikethrough(children);
 		}
 
+		if (inverse) {
+			children = chalk.inverse(children);
+		}
+
 		return children;
 	};
 

test/text.tsx

@@ -120,6 +120,11 @@ test('text with ansi256 background color', t => {
 	t.is(output, chalk.bgAnsi256(194)('Test'));
 });
 
+test('text with inversion', t => {
+	const output = renderToString(<Text inverse>Test</Text>);
+	t.is(output, chalk.inverse('Test'));
+});
+
 test('remeasure text when text is changed', t => {
 	const Test = ({add}) => (
 		<Box>