Skip to content
Branch: master
Clone or download
Latest commit 400b199 Feb 27, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
examples Add support for style prop Oct 29, 2017
specs Add <img /> support (#18) Feb 27, 2018
src Add <img /> support (#18) Feb 27, 2018
.babelrc Bootstrap commit Jul 18, 2016
.eslintrc Add specs Oct 29, 2017
.gitignore Ignore dist Oct 29, 2017
.npmignore
.travis.yml Update travis.yml Oct 29, 2017
LICENSE
README.md Add missing commas in example Nov 28, 2017
jest.config.js Add specs Oct 29, 2017
package.json v4.0.0 Feb 27, 2018
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

You can’t perform that action at this time.