# @klintm/phase-react

> React plugin for the phase micro-store/change emitter

Latest version **1.0.1** (published 2019-04-18) · MIT license · 0 weekly downloads

## Install

```sh
npm install @klintm/phase-react
pnpm add @klintm/phase-react
yarn add @klintm/phase-react
bun add @klintm/phase-react
```

## Health

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

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.1 |
| Published | 2019-04-18 |
| First published | 2019-04-18 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 4.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Klint Mane |
| Maintainers | klintmane |

## Links

- npm: https://www.npmjs.com/package/@klintm/phase-react
- Repository: https://github.com/klintmane/phase-react
- Homepage: https://github.com/klintmane/phase-react#readme
- Issues: https://github.com/klintmane/phase-react/issues
- npm.io page: https://npm.io/package/@klintm/phase-react

## Recent versions

- 1.0.1 (latest) — 2019-04-18
- 1.0.0 — 2019-04-18

## README

<h1 align="center">
  <a href="#">
    <img src="https://cdn2.iconfinder.com/data/icons/harry-potter-solid-collection/60/36_-_Harry_Potter_-_Solid_-_Time_Turner-256.png" alt="phase" width="125px">
  </a>
  <br>
  phase-react
</h1>
<h3 align="center">React plugin for the <strong>phase</strong> micro-store/change emitter</h3>
<br>

**phase-react** is the react plugin for [phase](https://github.com/klintmane/phase).

## Features

Exports a hook that allows subscribing to a phase store and path.

## Installation

### npm

`npm i @klintm/phase-react`

## Usage

```js
import Phase from "@klintm/phase";
import { useStore } from "@klintm/phase-react";

const counter = Phase(
  {
    name: "",
    count: 0
  },
  state => ({
    changeName: n => state.set("name", n),
    increment: () => state.set("count", state("count") + 1),
    decrement: () => state.set("count", state("count") - 1)
  })
);

const Counter = () => {
  const state = useStore(counter);
  const { decrement, increment } = state.actions;

  return (
    <div>
      <div>Count: {state("count")}</div>
      <button onClick={decrement}>-</button>
      <button onClick={increment}>+</button>
    </div>
  );
};
```

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