diff --git a/media/text-inverse.jpg b/media/text-inverse.jpg new file mode 100644 index 000000000..2275e77dd Binary files /dev/null and b/media/text-inverse.jpg differ diff --git a/readme.md b/readme.md index e00afb1d0..34eaa017d 100644 --- a/readme.md +++ b/readme.md @@ -205,6 +205,7 @@ const Example = () => ( I am italic I am underline I am strikethrough + I am inversed ); @@ -285,6 +286,21 @@ Default: `false` Make the text crossed with a line. +#### inverse + +Type: `boolean`\ +Default: `false` + +Inverse background and foreground colors. + +```jsx + + Inversed Yellow + +``` + + + #### wrap Type: `string`\ diff --git a/src/components/Text.tsx b/src/components/Text.tsx index fe175069f..0aec42fd1 100644 --- a/src/components/Text.tsx +++ b/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 = ({ italic, underline, strikethrough, + inverse, wrap, children }) => { @@ -98,6 +104,10 @@ const Text: FC = ({ children = chalk.strikethrough(children); } + if (inverse) { + children = chalk.inverse(children); + } + return children; }; diff --git a/test/text.tsx b/test/text.tsx index 782b613d4..732e4fa40 100644 --- a/test/text.tsx +++ b/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(Test); + t.is(output, chalk.inverse('Test')); +}); + test('remeasure text when text is changed', t => { const Test = ({add}) => (