JavaScript
Switch branches/tags
Latest commit ec85678 Nov 2, 2017 @diegomura diegomura Merge pull request #16 from tvthatsme/master
Update README.md
Permalink
Failed to load latest commit information.
examples Add support for style prop Oct 29, 2017
specs Add specs Oct 29, 2017
src Use just the window.clear method Oct 30, 2017
.babelrc Bootstrap commit Jul 18, 2016
.eslintrc Add specs Oct 29, 2017
.gitignore Ignore dist Oct 29, 2017
.npmignore v3.0.0 Oct 29, 2017
.travis.yml Update travis.yml Oct 29, 2017
LICENSE Bootstrap commit Jul 18, 2016
README.md Update README.md Nov 2, 2017
jest.config.js Add specs Oct 29, 2017
package.json v3.0.1 Oct 29, 2017
yarn.lock Add specs Oct 29, 2017

README.md

React for the Console

npm Travis license

Install

yarn add react-log

or

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.

License

MIT © Diego Muracciole