zoriya/v10
1
0
Fork 0
mirror of https://github.com/zoriya/v10.git synced 2026-08-16 02:45:09 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(site): add util reference pipeline (#537)

Browse Source 
Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Darius Cepulis
2026-02-24 15:34:34 -06:00
committed by GitHub
co-authored by Claude Opus 4.6
parent c11395ece1
commit 78112fbefd
143 changed files with 7031 additions and 481 deletions
Download Patch File Download Diff File Expand all files Collapse all files
site/src/content/docs/reference/use-store.mdx
+56
View File
@@ -0,0 +1,56 @@
---
title: useStore
description: Hook to access store state and actions with optional selector-based subscriptions
---
import UtilReference from "@/components/docs/api-reference/UtilReference.astro";
import Demo from "@/components/docs/demos/Demo.astro";
import DocsLink from "@/components/docs/DocsLink.astro";
import FrameworkCase from "@/components/docs/FrameworkCase.astro";
import StyleCase from "@/components/docs/StyleCase.astro";
import StoreAccessDemoReact from "@/components/docs/demos/use-store/react/css/StoreAccess";
import storeAccessReactTsx from "@/components/docs/demos/use-store/react/css/StoreAccess.tsx?raw";
import storeAccessReactCss from "@/components/docs/demos/use-store/react/css/StoreAccess.css?raw";
import SelectorDemoReact from "@/components/docs/demos/use-store/react/css/Selector";
import selectorReactTsx from "@/components/docs/demos/use-store/react/css/Selector.tsx?raw";
import selectorReactCss from "@/components/docs/demos/use-store/react/css/Selector.css?raw";
`useStore` subscribes to a store instance directly. It has the same two overloads as <DocsLink slug="reference/use-player">`usePlayer`</DocsLink> — without a selector for store access, or with a selector for reactive state. Within a player provider, `usePlayer` is usually simpler since it reads the store from context. Reach for `useStore` when you have a store instance directly or need to derive computed values from the store.
## Examples
### Store Access
Call `useStore(store)` without a selector to get the store instance back for imperative actions. The component does not subscribe to state changes.
<FrameworkCase frameworks={["react"]}>
<StyleCase styles={["css"]}>
<Demo
files={[
{ title: "App.tsx", code: storeAccessReactTsx, lang: "tsx" },
{ title: "App.css", code: storeAccessReactCss, lang: "css" },
]}
>
<StoreAccessDemoReact client:idle />
</Demo>
</StyleCase>
</FrameworkCase>
### Selector Subscription
Pass a selector to derive and subscribe to computed values from the store. The component re-renders when the derived value changes, using shallow equality by default.
<FrameworkCase frameworks={["react"]}>
<StyleCase styles={["css"]}>
<Demo
files={[
{ title: "App.tsx", code: selectorReactTsx, lang: "tsx" },
{ title: "App.css", code: selectorReactCss, lang: "css" },
]}
>
<SelectorDemoReact client:idle />
</Demo>
</StyleCase>
</FrameworkCase>
<UtilReference util="useStore" />