# gewu-ob

> - Olny 0.4kb(gzip) - Only 4 Core API: - CreateObserver - useObserver - Consumer - next - Use typescript

Latest version **2.2.8** (published 2022-07-04) · 0 weekly downloads

## Install

```sh
npm install gewu-ob
pnpm add gewu-ob
yarn add gewu-ob
bun add gewu-ob
```

## Health

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

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.2.8 |
| Published | 2022-07-04 |
| First published | 2022-07-04 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 13 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Maintainers | ymblender |

## Links

- npm: https://www.npmjs.com/package/gewu-ob
- Repository: https://github.com/ymzuiku/gewu-packages
- Homepage: git+https://github.com/ymzuiku/gewu-packages.git
- Issues: git+https://github.com/ymzuiku/gewu-packages.git
- npm.io page: https://npm.io/package/gewu-ob

## Recent versions

- 2.2.8 (latest) — 2022-07-04

## README

# react-ob

- Olny 0.4kb(gzip)
- Only 4 Core API:
  - CreateObserver
  - useObserver
  - Consumer
  - next
- Use typescript

## Install

```sh
$ npm install --save react-ob
```

## Use Hooks style

```js
import { CreateObserver, UseObserver } from "gewu-ob";

const data = CreateObserver({ age: 5, text: "hello" });

const Button = () => {
  // only update when s.age change
  const { age } = useObserver(data, (s) => [s.age]);
  return (
    <button
      onClick={() => {
        data.next((s) => {
          s.age += 1;
        });
      }}
    >
      add num
    </button>
  );
};

const Input = () => {
  // only update when s.text change
  const { text } = useObserver(data, (s) => [s.text]);
  return (
    <div>
      <div>{text}</div>
      <input
        placeholder="inputA..."
        onInput={(e) => {
          data.next((s) => {
            s.text = e.currentTarget.value;
          });
        }}
      />
    </div>
  );
};
```

## Use Consumer style

```js
import { CreateObserver, Consumer } from "gewu-ob";

const data = CreateObserver({ text: "please input" });

export default () => {
  return (
    <div>
      <Consumer data={data} memo={(s) => [s.text]} render={(s) => <div>{s.text}</div>} />
      <input
        placeholder="inputA..."
        onInput={(e) => {
          data.next((s) => {
            s.text = e.currentTarget.value;
          });
        }}
      />
    </div>
  );
};
```

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