https://github.com/sborrazas/react-watcher
ReactJS helper for subscribing to prop changes
https://github.com/sborrazas/react-watcher
helper javascript props react util
Last synced: 10 months ago
JSON representation
ReactJS helper for subscribing to prop changes
- Host: GitHub
- URL: https://github.com/sborrazas/react-watcher
- Owner: sborrazas
- License: mit
- Created: 2017-03-08T22:38:28.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2017-03-09T01:39:27.000Z (over 9 years ago)
- Last Synced: 2023-12-22T07:21:47.358Z (over 2 years ago)
- Topics: helper, javascript, props, react, util
- Language: JavaScript
- Size: 4.88 KB
- Stars: 9
- Watchers: 2
- Forks: 2
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# React Watcher
[](https://travis-ci.org/sborrazas/react-watcher)
Simple helper to watch your React components prop changes.
Requires [React](https://github.com/facebook/react) to render components.
**Note:** Using this library for watching prop changes is highly discouraged.
It is however the only way of watching prop changes when using external
libraries or very complex component trees prop configurations.
## Install
```
npm install react-watcher
```
## Examples
### Quickstart
Wrap a component to access `watch` (and `unwatch`) binding functions.
```js
import connect from 'react-watcher';
class UserDetail extends React.PureComponent {
render() {
const { id } = this.props;
return (
{id});
}
componentWillMount() {
const { watch } = this.props;
watch('id', (newId) => {
// New ID assigned, you can use this to dispatch a user fetch action or
// any other Redux action dispatch or function call.
});
}
}
export default connect(UserDetail);
```
**Note:** The prop to watch can be any value accepted by
[Lodash get function](https://lodash.com/docs/4.17.4#get). Examples:
`'params.id'`, `'users[0].id'`, `['users', 0, 'id']`.
## API
### `connect`
Connect the React component to get the `watch` and `unwatch` props for binding
the prop change events.
#### Arguments
* `Component` (required) – The React component to connect to.
#### Exposed props
* `watch(propPath, callback)` – Binds the prop change to the given callback.
* `unwatch(propPath)` – Removes the binding. Note: `unwatch` doesn't need to be
called on component unmount. Bindings will be freed automatically.
## Common pitfalls
Using this library for watching prop changes that you change directly is highly
discouraged. Instead, call the prop change callback when the change is performed.
```js
/* Bad */
class UsersList extends React.Component {
render() {
const { activeFilter, users } = this.props;
return (/* ... */);
}
toggleActive(event) {
dispatch(toggleActiveAction());
}
componentWillMount() {
this.props.watch('activeFilter', (activeFilter) => {
alert('Active filter has changed!');
});
}
}
export default connect(UsersList);
/* Good */
class UsersList extends React.Component {
render() {
const { activeFilter, users } = this.props;
return (/* ... */);
}
toggleActive(event) {
dispatch(toggleActiveAction());
alert('Active filter has changed!');
}
}
```
## Authors
**Sebastián Borrazás**
* [sborrazas.com](http://sborrazas.com)
## License
MIT