https://github.com/shisama/react-log-decorator

React logger for props and state with Decorators.
https://github.com/shisama/react-log-decorator

decorator decorators javascript log logger react

Last synced: about 9 hours ago
JSON representation

React logger for props and state with Decorators.

• Host: GitHub
• URL: https://github.com/shisama/react-log-decorator
• Owner: shisama
• License: mit
• Created: 2018-02-26T12:45:01.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2018-02-28T15:18:06.000Z (over 6 years ago)
• Last Synced: 2024-04-24T00:41:59.331Z (7 months ago)
• Topics: decorator, decorators, javascript, log, logger, react
• Homepage: https://www.npmjs.com/package/react-log-decorator
• Size: 1.57 MB
• Stars: 0
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
React Log Decorator

=====================

A decorator to log props and state with Decorators

![capture](capture/react-log-decorator.gif)

Installation

------------

```sh

npm install react-log-decorator

```

Usage

-----

```jsx

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 (

      


        

        
{this.props.message}

      

    )

  }

}

```


Please use default import

```js

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.

```js

const log = logger(true);

```

This is then used on lifecycle methods as follows:

```js

@log

shouldComponentUpdate(nextProps, nextState) {

  return this.props.message !== nextProps.message;

}

@log

render() {

  return 
{this.props.message}

}

```


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](babel-plugin-transform-decorators-legacy)

Please use [babel-plugin-transform-decorators-legacy](https://www.npmjs.com/package/babel-plugin-transform-decorators-legacy)

Todo

---

* options to change style