Obostha.js

Minimal State Management Library For React

Features

• Minimal state management core
• React integration with useSyncExternalStore
• TypeScript support

Installation

npm install obostha

Usage

Core Store

Create a store using createStore:

import { createStore } from 'obostha'

type CounterState = { count: number }
const counterStore = createStore<CounterState>((set) => ({
  count: 0,
  increment: () => set((s) => ({ count: s.count + 1 })),
}))

• createStore(fn) initializes the store with your state and actions.
• The returned store has:
  • getSnapshot(): returns the current state
  • subscribe(listener): subscribe to state changes
  • setState(partial): update the state

React Integration

Use create to create a React hook for your store:

import { create } from 'obostha'

type CounterState = { count: number }
const useCounter = create<CounterState>((set) => ({
  count: 0,
  increment: () => set((s) => ({ count: s.count + 1 })),
}))

function Counter() {
  const count = useCounter((s) => s.count)
  const increment = useCounter((s) => s.increment)
  return (
    <button onClick={increment}>
      Count: {count}
    </button>
  )
}

• create(fn) returns a React hook.
• The hook accepts a selector to pick part of the state.

API Reference

createStore

function createStore<S extends object>(
  fn: StateCreator<S>
): {
  getSnapshot: () => S
  subscribe: (listener: () => void) => () => void
  setState: SetState<S>
}

• StateCreator<S>: (set: SetState<S>) => S
• SetState<S>: (partial: Partial<S> | (prev: S) => Partial<S>) => void

create

function create<S extends object>(fn: StateCreator<S>): <Sel = S>(selector?: (s: S) => Sel) => Sel

• Returns a React hook for consuming the store.

License

MIT