Butcher

Butcher is a minimalistic state management library inspired by beedle , zustand, and an expanded derivative of mutilator ( hence the name "butcher"). Butcher excels when you want to handle relatively simple states using vanilla TS/JS in the browser. If you want something more robust or something that handles complex states, I suggest looking into other solutions like Redux .

First create a butcher

A butcher represents a unit of interactive state.

import { butcher } from 'butcherjs'

const counter = butcher({
  name: 'counter',
  meat: {
    count: 0
  }
})

Change the state, just like an Object

Once you've defined the butcher instance, you can now use it anywhere in your project without directly passing it in via function parameters or class variables. Directly change the state, just like an ordinary Object, but reap the benefits of reactivity in other places where state changes are listened to.

const button = () => {
  const buttonEl = document.getElementById('buttonEl')
  buttonEl.addEventListener("click", () => {
    counter.count += 1
  })
}

React to state changes elsewhere

Use the listen function to react to state changes for a specific butcher instance. Pass in a callback function that runs when the state is updated. This way, there is no need to worry about extraneous renders for components that don't matter.

import { listen } from 'butcherjs'

const currentCount = () => {
  const currentCountEl = document.getElementById('currentCountEl')
  listen(counter, 'count', () => {
    currentCountEl.innerHTML = `${counter.count}`
  })
}