React for the Console
Install
yarn add react-logor
npm install react-log --saveUsage
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>Output
Run the example yourself
On the root of the project:
cd examples/
npm install
npm startThe 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