console.log react styling

react-logging.jsx

import React from 'react';
// cf https://github.com/vadimdemedes/ink
import {Text, Box} from 'ink';
import {render} from 'ink-testing-library';

function transform(value) {
  if (React.isValidElement(value)) {
    const {lastFrame} = render(<Box>{value}</Box>);
    return lastFrame();
  }
  return value;
}

for (const k of ['log', 'error', 'warn', 'info', 'debug']) {
  const original = console[k];
  console[k] = (...args) => {
    original.apply(console, args.map(transform));
    return original;
  };
}

// use it like that
console.log(
	<>
		<Text color="green">I am green</Text>
		<Text color="black" backgroundColor="white">
			I am black on white
		</Text>
		<Text color="#ffffff">I am white</Text>
		<Text bold>I am bold</Text>
		<Text italic>I am italic</Text>
		<Text underline>I am underline</Text>
		<Text strikethrough>I am strikethrough</Text>
		<Text inverse>I am inversed</Text>
	</>)