A flexible toolbox with different types of state managers catered to different scenarios.

Packages	Stats
cotton-box
cotton-box-react

Key Features

• Lightweight & fast
• Declarative lifecycle management
• Supports asynchronous set-state functions
• Official bindings for React available

Documentation

View documentations (still a work-in-progress)

Examples

Plain Example

import { StateManager } from 'cotton-box'

const CounterState = new StateManager(42)

// Set, get, reset
CounterState.set(7)
console.log(CounterState.get()) // 7
CounterState.reset()
console.log(CounterState.get()) // 42

// Watch for state changes
const unwatch = CounterState.watch((state) => {
  console.log(state)
})

// Wait for state to change
// Promise will resolve when value matches
await CounterState.wait(50)

Example With React

import { useStateValue } from 'cotton-box-react'

function App() {
  const counter = useStateValue(CounterState)
  return <h1>Counter: {counter}</h1>
}

Support This Project

• Ko-fi: ko-fi.com/glyphcat
• BTC: bc1q5qp6a972l8m0k26ln9deuhup0nmldf86ndu5we