@klintm/phase-react

phase-react

React plugin for the phase micro-store/change emitter

phase-react is the react plugin for phase.

Features

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

Installation

npm

npm i @klintm/phase-react

Usage

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>
  );
};