Minimal state management library for React and beyond.

Cotton Box is a lightweight state management library designed for flexibility and simplicity.

It works seamlessly with React Hooks while remaining usable outside React, requires no providers or boilerplate, and supports advanced features like async state updates, customizable equality checks, and declarative lifecycle management.

Packages	Stats
cotton-box		Changelogs
cotton-box-react		Changelogs

Features

• ⚡️ Lightweight & fast
• 🧩 No providers or boilerplate
• 🎯 Customizable equality checking
• 🌱 Declarative lifecycle management
• 🌐 Library/Framework agnostic
• ⏸️ Temporarily unwatch state in hooks
• ⏳ Supports async state updates
• 📚 Fully typed API

Examples

Creating A State Manager

import { SimpleStateManager } from 'cotton-box'

const CounterState = new SimpleStateManager(0)

Set Value

By providing a new value

CounterState.set(42)

By using a function

CounterState.set((c) => c + 1)

Get Value

const counter = CounterState.get()

Watch stage changes

const unwatch = CounterState.watch((counter) => {
  console.log(counter)
})
// ... other code here ...
unwatch()

Wait for a value

// Wait for counter to reach 100
await CounterState.wait(100)

Using With React

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

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

Links