# reuni-react

> React bindings for Reuni

Latest version **0.1.0-beta.1** (published 2018-02-20) · Apache-2.0 license · 0 weekly downloads

## Install

```sh
npm install reuni-react
pnpm add reuni-react
yarn add reuni-react
bun add reuni-react
```

## Health

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

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.0-beta.1 |
| Published | 2018-02-20 |
| First published | 2018-01-31 |
| Weekly downloads | 0 |
| License | Apache-2.0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 47.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2 |
| Author | Hapood Wang |
| Maintainers | hapood |
| Keywords | reuni, reuni-react, immutable, observable, react, reactjs |

## Links

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

## Dependencies (2)

- [reuni](https://npm.io/package/reuni.md) ^0.1.0-beta.1
- [prop-types](https://npm.io/package/prop-types.md) ^15.6.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

- 0.1.0-beta.1 (latest) — 2018-02-20
- 0.1.0-alpha.5 (beta) — 2018-02-16
- 0.1.0-alpha.4 — 2018-02-07
- 0.1.0-alpha.3 — 2018-02-05
- 0.1.0-alpha.1 — 2018-01-31

## README

# reuni-react · [![npm version](https://img.shields.io/npm/v/reuni-react.svg?style=flat-square)](https://www.npmjs.com/package/reuni-react) [![Coverage Status](https://codecov.io/gh/hapood/reuni-react/branch/master/graphs/badge.svg)](https://codecov.io/gh/hapood/reuni-react) [![CI Status](https://circleci.com/gh/hapood/reuni-react/tree/master.svg?style=shield)](https://circleci.com/gh/hapood/reuni-react)

React bindings for Reuni

## Install

```
npm install reuni-react --save
```

## [Example](https://hapood.github.io/reuni-react/)

A complete example is under `/example` directory.
Online example can be found here: [Here](https://hapood.github.io/reuni-react/).

## Quick Start

1. Design a suitable store for react component.

```typescript
import { value, task, delay } from "reuni-react";

export default class ExampleStore {
  @value name = "test";
  @value cnt = 0;

  @task
  add(num: number) {
    this.cnt += num;
  }

  @task.async
  async addAsync(num: number) {
    await delay(100);
    this.cnt += num;
  }
}
```

2. Using this store in react component.

```typescript
import * as React from "react";
import ExampleStore from "./ExampleStore";

export type Props = {
  exampleStore: ExampleStore;
};

export default class ExampleComponent extends React.Component<Props> {
  render() {
    let { exampleStore } = this.props;
    return (
      <div>
        <div>{exampleStore.cnt}</div>
        <button onClick={()=>exampleStore.add(1)}>Add</button>
        <button onClick={()=>exampleStore.addAsync(1)}>Add Async</button>
      <div>
    );
  }
}
```

2. Export react component with store as HOC.

```javascript
import { storeObserver, Provider, createMount } from "src";
import ExampleStore from "./ExampleStore";
import ExampleComponent from "./ExampleComponent";

const HOC = mount(
    ExampleComponent,
    storeObserver(({ exampleStore }) => ({
      exampleStore
    }))
  )
    .addStore("exampleStore", ExampleStore)
    .toHOC();

export default HOC
```

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