React Log Decorator

A decorator to log props and state with Decorators

Installation

npm install react-log-decorator

Usage

import {Component} from 'react';
import logger from 'react-log-decorator';
const log = logger(process.env.NODE_ENV === 'development');

export default class MyComponent extends Component {
  @log
  render() {
    return (
      <div>
        <input type="text" onChange = {this.props.onChange} />
        <p>{this.props.message}</p>
      </div>
    )
  }
}

Please use default import

import logger from 'react-log-decorator';

Please decide which you log props and state. If you want to log them, set true. If you want not to log them, set false.

const log = logger(true);

This is then used on lifecycle methods as follows:

@log
shouldComponentUpdate(nextProps, nextState) {
  return this.props.message !== nextProps.message;
}

@log
render() {
  return <p>{this.props.message}</p>
}

Then, run your React App and open browser's console.

lifecycle methods you can use this decorator on

|methods|display| |----|----| |componentWillMount|props, state| |componentDidMount|props, state| |componentWillReceiveProps|props, state| |componentWillReceiveProps|props, state, nextProps| |shouldComponentUpdate|props, state, nextProps, nextState| |componentWillUpdate|props, state, nextProps, nextState| |componentDidUpdate|props, state, prevProps, prevState| |componentWillUnmount|props, state|

with Babel

Please use babel-plugin-transform-decorators-legacy

Todo

• options to change style