Awesome

React for the Console

Install

yarn add react-log

npm install react-log --save

Usage

react-log exports a single React Component called Log. Each child will not be rendered on the DOM, but will produce an analog representation on the console.

No proprietary syntax is needed for child HTML elements. react-log handles the parsing and rendering of native React-DOM elements for you.

Let's see it in action!

Example

import Log from 'react-log';

<Log>
  <h1
    style={{
      color: 'black',
      fontSize: '50px',
      fontWeight: 'normal',
      fontFamily: 'Open Sans, sans-serif',
    }}>
    React
    <span
      style={{
        color: 'white',
        fontSize: '45px',
        fontWeight: 'bold',
        marginLeft: '10px',
        padding: '5px',
        fontFamily: 'Arial, Helvetica, sans-serif',
        background: 'linear-gradient(to bottom right, #13493b, #016a26)',
      }}>
      log
    </span>
  </h1>
  <a
    href='https://github.com/diegomura/react-log'
    style={{ display: 'block', lineHeight: '40px' }}
  >
    For more info
  </a>
</Log>

See full example

Output

banner

Run the example yourself

On the root of the project:

cd examples/
npm install
npm start

The server should be listening now on http://localhost:8080

Browser Support

Tested and working on Chrome 51 and Firefox 45. Does not work on Safari or IE as far I've seen. Yet.