react-logger-component

React Logger

Logger for react lifecycle methods.

Installation

npm install react-logger-component

Examples

React Logger exports two abstractions for React.Component and React.PureComponent.

import React from 'react';
import {ReactLoggerComponent} from 'react-logger';


export default class App extends ReactLoggerComponent {

    constructor(props) {
        super(props);
        this.displayName = 'MyApp';
    }

    render() {
        return <div>MyApp</div>
    }
}

When you need to have a lifecycle method in a component you must call the parent function in order to see the log for it. All other lifecycle methods which are not defined in the App component will be logged.

import React from 'react';
import {ReactLoggerComponent} from 'react-logger';


export default class App extends ReactLoggerComponent {

    constructor(props) {
        super(props);
        this.displayName = 'MyApp';
    }
    
    componentWillUpdate(nextProps, nextState) {
        super.componentWillUpdate(nextProps, nextState);
        // your code
    }

    render() {
        return <div>MyApp</div>
    }
}

Pure components can also be inherited.

import React from 'react';
import {ReactPureLoggerComponent} from 'react-logger';


export default class App extends ReactPureLoggerComponent {

    constructor(props) {
        super(props);
        this.displayName = 'MyApp';
    }

    render() {
        return <div>MyApp</div>
    }
}

To run the example app:

• Clone the repo.
• npm install
• npm run build
• npm run build:example
• Open example/index.html.