1.0.0 • Published 8 years ago
react-watch v1.0.0
Watch
HoC component to see what's going on with your components
Install
The npm
-way
npm i react-watch --save-dev
Example
Use it like any HoC:
import withWatching from 'react-watch';
const MyStatelessComponent = withWatching(({ a, b }) => <span>{a + b}</span>);
class MyClassComponent extends React.Component {
render() {
return (
<p>
<MyStatelessComponent />
{this.props.children}
</p>
);
}
}
MyClassComponent = withWatching(MyClassComponent);
Now looking at your console logs you should see something like
MyClassComponent will mount
MyClassComponent rendering
MyClassComponent rendered
MyStatelessComponent will mount
MyStatelessComponent rendering
MyStatelessComponent rendered
MyStatelessComponent did mount
MyClassComponent did mount
API
withWatching(Component [, loggerFunction = console.log.bind(console) [, forceEnable = false]])
Component
: a valid React component to watch. It will log all lifecycle methods.loggerFunction
(optional): use a custom log functionforceEnable
(optional): enable the HoC also on non-development environments. If set tofalse
, react-watch will be active only ondevelopment
environment. See below.
Environment detection
react-watch will look at process.env.NODE_ENV and disable itself if it's not set to "development" environment.
On the client, use something like envify to replace process.env.NODE_ENV
with its value at build time. If you use a smart minifier, you will completely get rid of react-watch on production.
If react-watch can't detect process.env.NODE_ENV
, it will be disabled by default.
All this behavior can be overridden by setting forceEnable
argument to true
.
License
ISC
1.0.0
8 years ago