react-component-log v1.0.0
react-component-log
HOC for easier debugging/learning of lifecycle methods of React components
Note: The HOC acts as a shell around your actual component, it is NOT the component itself. Therefore, logging of internal component state is not implemented.
The HOC accepts an optional config object for specifying what should be logged. The config object contains multiple parameters:
printLevel: 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,
defaults to printing all the time, i.e. () => true
.
Note: only lifecycle methods which are related to component updates take prevProps
and nextProps
as input parameters,
the signature for other lifecycle methods is function()
Boolean flags for configuring which lifecycle methods should be printed
(defaults to 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:
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);
...
<CounterWithComponentLog value={0} />
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);
...
<CounterWithComponentLog value={0} />
7 years ago