https://github.com/mattecapu/react-watch
an extremely light, versatile and unobtrusive React HoC to log component lifecycle events
https://github.com/mattecapu/react-watch
Last synced: 5 months ago
JSON representation
an extremely light, versatile and unobtrusive React HoC to log component lifecycle events
- Host: GitHub
- URL: https://github.com/mattecapu/react-watch
- Owner: mattecapu
- Created: 2016-08-27T10:58:29.000Z (almost 10 years ago)
- Default Branch: master
- Last Pushed: 2016-08-27T11:00:31.000Z (almost 10 years ago)
- Last Synced: 2025-10-28T05:27:55.407Z (8 months ago)
- Language: JavaScript
- Size: 2.93 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Watch
### HoC component to see what's going on with your components
## Install
The `npm`-way
```bash
npm i react-watch --save-dev
```
## Example
Use it like any HoC:
```js
import withWatching from 'react-watch';
const MyStatelessComponent = withWatching(({ a, b }) => {a + b});
class MyClassComponent extends React.Component {
render() {
return (
{this.props.children}
);
}
}
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](https://facebook.github.io/react/docs/component-specs.html#lifecycle-methods).
* **`loggerFunction`** *(optional)*: use a custom log function
* **`forceEnable`** *(optional)*: enable the HoC also on non-development environments. If set to `false`, react-watch will be active only on `development` 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](https://github.com/hughsk/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