# mobx-observer-hook

> A hook to support using mobx with react functional components

Latest version **1.0.0** (published 2019-07-07) · ISC license · 0 weekly downloads

## Install

```sh
npm install mobx-observer-hook
pnpm add mobx-observer-hook
yarn add mobx-observer-hook
bun add mobx-observer-hook
```

## 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.0 |
| Published | 2019-07-07 |
| First published | 2019-07-07 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 3.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Suhail Abood |
| Maintainers | suhail |

## Links

- npm: https://www.npmjs.com/package/mobx-observer-hook
- Repository: https://github.com/suhdev/mobx-observer-hook
- Homepage: https://github.com/suhdev/mobx-observer-hook#readme
- Issues: https://github.com/suhdev/mobx-observer-hook/issues
- npm.io page: https://npm.io/package/mobx-observer-hook

## Recent versions

- 1.0.0 (latest) — 2019-07-07

## README

# mobx-observer-hook 

## Usage 

```typescript
import * as React from 'react'; 
import * as ReactDOM from 'react-dom';
import { observable, action } from 'mobx'; 
import { useObserver } from 'mobx-observer-hook'; 

class Model {
  @observable name = 'test'; 
  @observable time:Date = new Date();

  @action.bound
  setTime(time:Date) {
    this.time = time;
  }
}

function MyComponent({model}) {
  return useObserver(()=><div 
    className="my-component">{model.name} - {model.time.toString()}</div>,[model]);
}

let el = document.getElementById('app');

if (!el){
  el = document.createElement('div');
  el.id = 'app';
  document.body.appendChild(el);
}

const m = new Model();
m.name = 'Suhail'; 

ReactDOM.render(
  <MyComponent model={m} />,
  el
);

setInterval(()=>{
  m.setTime(new Date());
},1000);

```

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