) => S,
+): S {
+ return useClassyStore(catalogStore, selector);
+}
+```
+
+`createStoreHook` does this in one line:
+
+```ts
+// After — one-liner
+import {createClassyStore} from '@codebelt/classy-store';
+import {createStoreHook} from '@codebelt/classy-store/react';
+
+export const catalogStore = createClassyStore(new CatalogPageStore());
+export const useCatalogStore = createStoreHook(catalogStore);
+```
+
+The returned hook supports both selector and auto-tracked modes, plus custom `isEqual` — identical to `useClassyStore`, but with the store already bound:
+
+```tsx
+// Selector mode
+const count = useCatalogStore((state) => state.count);
+
+// Auto-tracked mode
+const snap = useCatalogStore();
+
+// Custom equality
+const data = useCatalogStore(
+ (state) => ({count: state.count, loading: state.loading}),
+ shallowEqual,
+);
+```
+
+`createStoreHook` validates its argument immediately — if you pass something that isn't a store proxy, it throws at module load time rather than on first render.
+
## Tips & Gotchas
### Mutate through methods, not from components
diff --git a/website/docs/index.md b/website/docs/index.md
index 4cd1d57..cf15655 100644
--- a/website/docs/index.md
+++ b/website/docs/index.md
@@ -181,6 +181,56 @@ The factory runs once per mount. Subsequent re-renders reuse the same store inst
> See the [Local Stores](./TUTORIAL.md#local-stores) section in the Tutorial for persistence patterns and more examples.
+### `createStoreHook(store)`
+
+Creates a pre-bound React hook for a specific store proxy. Eliminates the boilerplate of writing a typed wrapper around `useClassyStore` for every store instance.
+
+```tsx
+import {createClassyStore} from '@codebelt/classy-store';
+import {createStoreHook} from '@codebelt/classy-store/react';
+
+class CatalogPageStore {
+ items: string[] = [];
+ loading = false;
+
+ get count() { return this.items.length; }
+
+ addItem(item: string) { this.items.push(item); }
+}
+
+const catalogStore = createClassyStore(new CatalogPageStore());
+export const useCatalogStore = createStoreHook(catalogStore);
+```
+
+The returned hook supports both selector mode and auto-tracked mode — identical to `useClassyStore`, but with the store already bound:
+
+```tsx
+// Selector mode
+function ItemCount() {
+ const count = useCatalogStore((state) => state.count);
+ return {count} items;
+}
+
+// Auto-tracked mode
+function ItemList() {
+ const snap = useCatalogStore();
+ return {snap.items.map((item) => - {item}
)}
;
+}
+
+// Custom equality
+import {shallowEqual} from '@codebelt/classy-store';
+
+function Summary() {
+ const data = useCatalogStore(
+ (state) => ({count: state.count, loading: state.loading}),
+ shallowEqual,
+ );
+ return {data.loading ? 'Loading...' : `${data.count} items`}
;
+}
+```
+
+Validates at creation time — throws if the argument is not a store proxy.
+
### `snapshot(store)`
Creates a deeply frozen, immutable snapshot of the current state. Used internally by `useClassyStore` but also available directly.
diff --git a/website/static/llms-full.txt b/website/static/llms-full.txt
index 39f889b..2331835 100644
--- a/website/static/llms-full.txt
+++ b/website/static/llms-full.txt
@@ -189,9 +189,39 @@ function Counter() {
The factory runs once per mount. Subsequent re-renders reuse the same store instance.
+### `createStoreHook(store)`
+
+Creates a pre-bound React hook for a specific store proxy. Eliminates the boilerplate of writing a typed wrapper around `useClassyStore` for every store instance.
+
+```ts
+import {createClassyStore} from '@codebelt/classy-store';
+import {createStoreHook} from '@codebelt/classy-store/react';
+
+const catalogStore = createClassyStore(new CatalogPageStore());
+export const useCatalogStore = createStoreHook(catalogStore);
+```
+
+The returned hook supports both selector mode and auto-tracked mode — identical to `useClassyStore`, but with the store already bound:
+
+```tsx
+// Selector mode
+const count = useCatalogStore((state) => state.count);
+
+// Auto-tracked mode
+const snap = useCatalogStore();
+
+// Custom equality
+const data = useCatalogStore(
+ (state) => ({count: state.count, loading: state.loading}),
+ shallowEqual,
+);
+```
+
+Validates at creation time — throws if the argument is not a store proxy.
+
### `snapshot(store)`
-Creates a deeply frozen, immutable snapshot of the current state. Used internally by `useStore` but also available directly.
+Creates a deeply frozen, immutable snapshot of the current state. Used internally by `useClassyStore` but also available directly.
```typescript
import {snapshot} from '@codebelt/classy-store';
@@ -894,6 +924,36 @@ function EditProfile() {
}
```
+## Creating a Bound Hook with `createStoreHook`
+
+When you have a module-level store, you typically also export a typed hook for it. `createStoreHook` does this in one line:
+
+```ts
+import {createClassyStore} from '@codebelt/classy-store';
+import {createStoreHook} from '@codebelt/classy-store/react';
+
+export const catalogStore = createClassyStore(new CatalogPageStore());
+export const useCatalogStore = createStoreHook(catalogStore);
+```
+
+The returned hook supports both selector and auto-tracked modes, plus custom `isEqual` — identical to `useClassyStore`, but with the store already bound:
+
+```tsx
+// Selector mode
+const count = useCatalogStore((state) => state.count);
+
+// Auto-tracked mode
+const snap = useCatalogStore();
+
+// Custom equality
+const data = useCatalogStore(
+ (state) => ({count: state.count, loading: state.loading}),
+ shallowEqual,
+);
+```
+
+`createStoreHook` validates its argument immediately — if you pass something that isn't a store proxy, it throws at module load time rather than on first render.
+
## Tips & Gotchas
### Non-proxyable types
diff --git a/website/static/llms.txt b/website/static/llms.txt
index ab1209c..a85ea49 100644
--- a/website/static/llms.txt
+++ b/website/static/llms.txt
@@ -7,11 +7,11 @@
## Getting Started
- [Introduction & API Reference](https://codebelt.github.io/classy-store/docs/): Full API
- covering `createClassyStore`, `useStore`, `snapshot`, `subscribe`, `shallowEqual`,
- `reactiveMap`, `reactiveSet` (collections entry), and all patterns
+ covering `createClassyStore`, `useClassyStore`, `createStoreHook`, `snapshot`, `subscribe`,
+ `shallowEqual`, `reactiveMap`, `reactiveSet` (collections entry), and all patterns
- [Tutorial](https://codebelt.github.io/classy-store/docs/TUTORIAL): Step-by-step guide —
- store definition, React hook modes (selector/auto-tracked), collections, inheritance,
- async patterns, local stores
+ store definition, React hook modes (selector/auto-tracked), `createStoreHook`, collections,
+ inheritance, async patterns, local stores
## Utilities