# reapex-react

> reapex react binding

Latest version **1.1.1** (published 2022-07-04) · MIT license · 0 weekly downloads

## Install

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

## Health

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

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.1 |
| Published | 2022-07-04 |
| First published | 2021-10-06 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 73.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 57 |
| Author | Yulong Ruan |
| Maintainers | ruanyu1 |
| Keywords | react-component, react |

## Links

- npm: https://www.npmjs.com/package/reapex-react
- Repository: https://github.com/ruanyl/reapex
- Issues: https://github.com/ruanyl/reapex/issues
- npm.io page: https://npm.io/package/reapex-react

## Dependencies (2)

- [reapex](https://npm.io/package/reapex.md) ^1.1.1
- [use-sync-external-store](https://npm.io/package/use-sync-external-store.md) ^1.0.0-rc.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.1.1 (latest) — 2022-07-04
- 1.0.0 — 2022-03-16
- 1.0.0-beta.28 — 2022-01-16
- 1.0.0-beta.27 — 2022-01-16
- 1.0.0-beta.26 — 2021-10-28
- 1.0.0-beta.24 — 2021-10-13
- 1.0.0-beta.23 — 2021-10-12
- 1.0.0-beta.22 — 2021-10-06

## README

# reapex-react
Reapex binding for React

### How to use:

```typescript
import { useModel } from 'reapex-react'
import { App } from 'reapex'
import { render } from 'react-dom'

export const app = new App()

const CounterModel = app.model('Counter', { total: 50 })

const [mutations] = CounterModel.mutations({
  increase: () => ({ total }) => ({ total: total + 1 }),
  decrease: () => ({ total }) => ({ total: total - 1 }),
})

const CounterComponent = () => {
  const total = useModel(CounterModel, (counter) => counter.total)

  return (
    <div>
      <button onClick={mutations.decrease}>-</button>
      {total}
      <button onClick={mutations.increase}>+</button>
    </div>
  )
}

render(<CounterComponent />, document.getElementById('root'))
```

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