HOC for easied debugging/learning of lifecycle methods for React components
npm install react-component-logprintLevel: string, which console function to be used for printing info to the console, defaults to log
shouldPrint: function(prevProps, nextProps), predicate for determining if info should be printed based on previous and next props,
() => true.
prevProps and nextProps as input parameters,
function()
true for every lifecycle method):
componentWillMount: boolean,
componentDidMount: boolean,
componentWillReceiveProps: boolean,
shouldComponentUpdate: boolean,
componentWillUpdate: boolean,
componentDidUpdate: boolean,
componentWillUnmount: boolean
`
Exposed functions are withComponentLog and withComponentLogConfig.
Internally, both functions delegate the functionality to the same internal HOC.
The difference being the following:
withComponentLog(Component, config): HOC, whereas
withComponentLogConfig(config): function(Component): HOC
The second exported function is to avoid modifying the order of execution when composing multiple HOCs.
Example usages of both exports:
`js
import { withComponentLog } from 'react-component-log'
import Counter from './Counter';
const config = {
printLevel: 'warn', // use console.warn
shouldPrint: (prevProps, nextProps) => { // print info only when prop value is NOT 3
if (prevProps && nextProps) {
return nextProps.value !== 3;
}
return true;
},
shouldComponentUpdate: false // skip printing for shouldComponentUpdate
};
const CounterWithComponentLog = withComponentLog(Counter, config);
...
`
`js
import { withComponentLogConfig } from 'react-component-log'
import Counter from './Counter';
const config = {
printLevel: 'error', // use console.error
componentWillMount: false // skip printing for componentWillMount
};
const withCustomConfig = withComponentLogConfig(config);
const CounterWithComponentLog = withCustomConfig(Counter);
...
``