react-hoc-console

React HOC Console

This is a simple HOC that allows you to see what is happening with the native console API, however, into your app. It's personalizable, I mean, you can activate or deactivate this HOC.

How to use

The reactConsole method provides two parameters, the first one is waiting for a React component. The second one is a boolean that activates or deactivate the console UI. You still be able to see the native console working through the dev tools.

/**
 * @param {React.Component} component - React component
 * @param {Boolean} activate - Should console UI is activated
 * @param {Boolean} autoScroll - Console UI scrolls down automatically when it receives new logs
 */
reactConsole(component:React.Component, activate:boolean = true, autoScroll:boolean = true);

HOC working:

Below is a code generated by npx create-react-app and modified to show the effect of the console. Read more.

import React, { Component } from 'react';
import reactConsole from 'react-hoc-console';
import logo from './logo.svg';
import './App.css';

class App extends Component {
  componentDidMount() {
    console.log('Component Did Mount!');
    console.info('Component Did Mount!');
    console.warn('Component Did Mount!');
    console.debug('Component Did Mount!');
    console.error('Component Did Mount!', 'App.js - 12');
  }
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <p>
            Edit <code>src/App.js</code> and save to reload.
          </p>
          <a
            className="App-link"
            href="https://reactjs.org"
            target="_blank"
            rel="noopener noreferrer"
          >
            Learn React
          </a>
        </header>
      </div>
    );
  }
}

export default reactConsole(App);