React for the Console
yarn add react-log
or
npm install react-log --save
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!
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>
On the root of the project:
cd examples/
npm install
npm start
The server should be listening now on http://localhost:8080
Tested and working on Chrome 51 and Firefox 45. Does not work on Safari or IE as far I've seen. Yet.
MIT © Diego Muracciole