useMaho

The useMaho hook is a React hook for managing a component's state and events.

Installation

NPM:

npm install --save react-use-maho

Yarn:

yarn add react-use-maho

Usage

🔗CodeSandbox

import { useMaho } from "react-use-maho"

const Counter = ({ min = 0, max = 10 }) => {
  const [state, send, { can }] = useMaho({
    data: {
      count: min
    },
    on: {
      ADD: {
        do: data => data.count++,
        if: data => data.count < max
      },
      REMOVE: {
        do: data => data.count--,
        if: data => data.count > min
      }
    }
  })

  return (
    <div>
      <h2>Count: {state.data.count}</h2>
      <button disabled={!can("ADD")} onClick={() => send("ADD")}>
        Add Item
      </button>
      <button disabled={!can("REMOVE")} onClick={() => send("REMOVE")}>
        Remove Item
      </button>
    </div>
  )
}

See the sidebar for:

• notes on usage
• comparisons with other state management solutions
• more complex examples

Features

• Typescript
• Immutable state (with immer)
• Event Handlers
• Event Dispatches (with payloads)
• Actions / conditions
• Serialized actions / conditions
• Multiple actions / conditions per event
• Multiple events per event handler
• Computed values
• States
• Nested states / Initial states
• Auto events (onExit, onEnter, onEvent)
• Transitions
• Deep transitions
• Parallel states
• History states
• Invoked Promises
• Activities

In Progress

• Visualizer

Contribution

To contribute to this project, visit the Github repository.

You can tweet the author at @steveruizok.