# react-easy-watcher

> watch state changes in react.js,just like the watcher api in vue.js

Latest version **1.0.4** (published 2018-03-06) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-easy-watcher
pnpm add react-easy-watcher
yarn add react-easy-watcher
bun add react-easy-watcher
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.4 |
| Published | 2018-03-06 |
| First published | 2018-03-04 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 7.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2 |
| Author | zysallen |
| Maintainers | zysallen |
| Keywords | react, react.js, watcher, watch |

## Links

- npm: https://www.npmjs.com/package/react-easy-watcher
- Repository: https://github.com/zysallen/react-easy-watcher
- Homepage: https://github.com/zysallen/react-easy-watcher#readme
- Issues: https://github.com/zysallen/react-easy-watcher/issues
- npm.io page: https://npm.io/package/react-easy-watcher

## Dependencies (2)

- [react](https://npm.io/package/react.md) ^16.2.0
- [lodash.isequal](https://npm.io/package/lodash.isequal.md) ^4.5.0

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.0.4 (latest) — 2018-03-06
- 1.0.3 — 2018-03-06
- 1.0.2 — 2018-03-06
- 1.0.1 — 2018-03-04
- 1.0.0 — 2018-03-04

## README

# react-easy-watcher

help to wacth state chagnes in react.js,just like the `watcher` api in vue.js.

[中文 README](README-zh_CN.md)

Requires [React](https://github.com/facebook/react) and [Lodash.isequal](https://lodash.com/).


## Install

```
npm install react-easy-watcher --save
```

## Examples

### Quickstart

* Wrap a component to access `watcher` HOC.

* It is easy to watch `state` changes,you must have an `Object` named `watch` in `this.state` in  your component,then you can watch `state` changes just like using  [watch](https://cn.vuejs.org/v2/guide/computed.html#%E4%BE%A6%E5%90%AC%E5%99%A8) in `vue`.the key of the object is the state you want to watch ,the value of the object is a function, When the field to be watched changes (support for deep listening), trigger this function. The parameters of the function are the values before and after the state changes


```js
import React, { Component } from 'react';
import watcher from 'react-easy-watcher';

class Hello extends Component {
    constructor(props) {
        super(props)
        this.state = {
            msg: 'react-easy-watcher',
            watch: {
                msg(newVal,oldVal) {
                    console.log(newVal,oldVal,this)
                }
            }
        }
    }
    change() {
        this.setState({
            msg: 'hello world!'
        })
    }
    render() {
        const { msg } = this.state
        return (
            <div>
                <h1>{ msg }</h1>
                <button onClick={this.change.bind(this)}>change</button>
            </div>
        )
    }
}
export default watcher(Hello);
```


## Authors

**zysallen**


## License

MIT

---
_Source: https://npm.io/package/react-easy-watcher · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._