Skip to content
stroid
Docs
Docs for v0.0.2 - current npm release. Reduce your code, reduce your stress - never your functionality.

stroid

Reduce your code, reduce your stress — never your functionality.

TypeScript-first state engine with named stores, selector hooks, persistence, tab sync, async helpers, and DevTools — all built in.

Why stroid?

Introduction

stroid is a TypeScript-first state management library for React. It combines the simplicity of selector-based hooks with built-in persistence, tab sync, async helpers, and DevTools — all with zero runtime dependencies and ~8.6 kB gzipped.

Tip

New to stroid? Start with the Quick Start guide to go from zero to a working store in 2 minutes.

Why stroid

Named stores, selector-first hooks, zero deps, persistence + tab sync built-in.

Bundle (min+gzip)

8.6 kB

Dependencies

0

Tab sync

BroadcastChannel

SSR safety

warn + opt-in

Used inDashboard starterDocs siteInternal toolingPlayground

Philosophy

State management shouldn't require choosing between simplicity and power. stroid keeps the API small: you create a named store once, read with useStore, and update with setStore. No providers, no middleware stacking, no boilerplate.

Every store is fully typed end to end. TypeScript infers state shape from createStore into selectors andsetStore without manual generics.

Core Ideas

stroid is built on four principles:

  • Mutable syntax, immutable updates. Write mutations inside setStore and stroid handles structural sharing for you.
  • Selector-based subscriptions. Components only re-render when the specific slice of state they select changes.
  • Batteries included. Persistence, tab sync, async fetch helpers, and DevTools are built in — not afterthought plugins.
  • Zero dependencies. The core ships with no external runtime dependencies.

Quick Example

users.tsx
import { createStore, setStore, useStore } from 'stroid'

// 1) Declare a named store once at module scope
createStore('users', {
  list: [] as { id: string; name: string }[],
})

// 2) Update it anywhere (mutable draft; immutable under the hood)
export function addUser(user: { id: string; name: string }) {
  setStore('users', (draft) => {
    draft.list.push(user)
  })
}

// 3) Read inside React components
export function UsersBadge() {
  const count = useStore('users', (s) => s.list.length)
  return <span>{count} users</span>
}
Quick Start