Logger for react lifecycle methods.
npm install react-logger-component
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
.