Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/christianbaroni/stores/llms.txt

Use this file to discover all available pages before exploring further.

Stores is a minimal, reactive state layer that works with or without React. It defines three runtime-evaluated store types — base, derived, and query — each representing a distinct category of state: local, computed, or asynchronously fetched. Stores track dependencies at runtime, evaluate lazily, and clean up automatically when unused.

Quickstart

Install Stores and build your first reactive store graph in minutes.

Core Concepts

Understand base, derived, query, and virtual stores and how they compose.

API Reference

Full type signatures and options for every public export.

Guides

Deep dives on persistence, cross-tab sync, React Native, and vanilla usage.

​
Three Store Types

Every piece of application state maps to one of three store primitives.

Base Store

Local, synchronous state with explicit update methods.

Derived Store

Computed values that re-run only when their inputs change.

Query Store

Async data that fetches, caches, and refetches reactively.

​
How It Works

1

Install the package

npm install @storesjs/stores
2

Create a base store

Define local state with a state creator function. The store is a callable React hook in the React build.
import { createBaseStore } from '@storesjs/stores';

export const settingsStore = createBaseStore(set => ({
  currency: 'USD',
  setCurrency: (currency: string) => set({ currency }),
}));
3

Derive computed state

The $ accessor tracks dependencies at runtime — only the values you read trigger updates.
import { createDerivedStore } from '@storesjs/stores';

export const formatterStore = createDerivedStore($ => {
  const { currency } = $(settingsStore);
  return new Intl.NumberFormat('en-US', { style: 'currency', currency });
});
4

Use in React

Stores are callable hooks. Select only the slice you need to prevent unnecessary re-renders.
function PriceDisplay({ amount }: { amount: number }) {
  const formatter = formatterStore();
  return <span>{formatter.format(amount)}</span>;
}

​
Key Features

  • Lazy evaluation — stores only compute and subscribe when observed; they clean up automatically when unused
  • Runtime dependency tracking — the $ accessor builds a precise dependency graph without manual selector lists
  • Persistence — sync (localStorage, MMKV) and async (Chrome storage) adapters with built-in hydration gating
  • Cross-tab sync — BroadcastChannel-based sync engine with session-aware conflict resolution
  • React & React Native — stores are callable hooks in both environments; MMKV handles native storage
  • Vanilla build — a no-React build is available via the vanilla package condition
  • Chrome Extension plugin — first-class ChromeStorageAdapter and ChromeExtensionSyncEngine exports

Build docs developers (and LLMs) love

Get started for freeTalk to us