-
-
Notifications
You must be signed in to change notification settings - Fork 131
Expand file tree
/
Copy pathindex.html
More file actions
1 lines (1 loc) · 13.5 KB
/
Copy pathindex.html
File metadata and controls
1 lines (1 loc) · 13.5 KB
1
<!DOCTYPE html><html lang="en"><head><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="preload" as="image" href="/favicon.svg"><script async="" src="https://www.googletagmanager.com/gtag/js?id=G-D1MGR8VRWJ"></script><link rel="dns-prefetch" href="https://www.googletagmanager.com/"><link href="https://www.googletagmanager.com/gtag/js?id=G-D1MGR8VRWJ" rel="preload" as="script"><link rel="preload" as="font" href="/fonts/inter.woff2" type="font/woff2" crossorigin="anonymous"><link rel="preload" as="font" href="/fonts/inconsolata.woff2" type="font/woff2" crossorigin="anonymous"><link rel="preload" as="font" href="/fonts/shantell.woff2" type="font/woff2" crossorigin="anonymous"><title>ui-react | TinyBase</title><meta name="description" content="The ui-react module of the TinyBase project provides both hooks and components to make it easy to create reactive apps with Store objects."><meta property="og:type" content="website"><meta property="og:title" content="ui-react | TinyBase"><meta property="og:description" content="The ui-react module of the TinyBase project provides both hooks and components to make it easy to create reactive apps with Store objects."><meta property="og:url" content="https://tinybase.org/api/ui-react/"><meta property="og:image" content="https://tinybase.org/favicon_pad.png"><meta name="twitter:card" content="summary"><meta name="twitter:title" content="ui-react | TinyBase"><meta name="twitter:description" content="The ui-react module of the TinyBase project provides both hooks and components to make it easy to create reactive apps with Store objects."><meta name="twitter:site" content="@tinybasejs"><meta name="twitter:image" content="https://tinybase.org/favicon_pad.png"><link rel="icon" type="image/svg+xml" href="/favicon.svg"><link rel="canonical" href="https://tinybase.org/api/ui-react/"><link rel="stylesheet" href="/css/index.css"><script src="/js/app.js"></script></head><body><header><a href="/"><img src="/favicon.svg" alt="TinyBase logo"><span>TinyBase</span></a><nav><ul><li><a href="/guides/">Guides</a></li><li><a href="/demos/">Demos</a></li><li><a href="/api/">API</a></li><li><a href="https://github.com/tinyplex/tinybase">GitHub</a></li></ul></nav><span id="dark"></span></header><main><nav><ul><li id="root" class="parent open"><span></span><a href="/">TinyBase</a><ul><li id="G" class="parent"><span></span><a href="/guides/">Guides</a></li><li id="D2" class="parent"><span></span><a href="/demos/">Demos</a></li><li id="api" class="parent open"><span></span><a href="/api/">API</a><ul><li id="e" class="parent"><span></span><a href="/api/the-essentials/">The Essentials</a></li><li id="c" class="parent"><span></span><a href="/api/checkpoints/"><code>checkpoints</code></a></li><li id="c3" class="parent"><span></span><a href="/api/common/"><code>common</code></a></li><li id="i" class="parent"><span></span><a href="/api/indexes/"><code>indexes</code></a></li><li id="m" class="parent"><span></span><a href="/api/mergeable-store/"><code>mergeable-store</code></a></li><li id="m3" class="parent"><span></span><a href="/api/metrics/"><code>metrics</code></a></li><li id="m4" class="parent"><span></span><a href="/api/middleware/"><code>middleware</code></a></li><li id="p" class="parent"><span></span><a href="/api/persisters/"><code>persisters</code></a></li><li id="p2" class="parent"><span></span><a href="/api/persister-automerge/"><code>persister-automerge</code></a></li><li id="p3" class="parent"><span></span><a href="/api/persister-browser/"><code>persister-browser</code></a></li><li id="p4" class="parent"><span></span><a href="/api/persister-cr-sqlite-wasm/"><code>persister-cr-sqlite-wasm</code></a></li><li id="p5" class="parent"><span></span><a href="/api/persister-durable-object-sql-storage/"><code>persister-durable-object-sql-storage</code></a></li><li id="p6" class="parent"><span></span><a href="/api/persister-durable-object-storage/"><code>persister-durable-object-storage</code></a></li><li id="p7" class="parent"><span></span><a href="/api/persister-electric-sql/"><code>persister-electric-sql</code></a></li><li id="p8" class="parent"><span></span><a href="/api/persister-expo-sqlite/"><code>persister-expo-sqlite</code></a></li><li id="p9" class="parent"><span></span><a href="/api/persister-file/"><code>persister-file</code></a></li><li id="p10" class="parent"><span></span><a href="/api/persister-indexed-db/"><code>persister-indexed-db</code></a></li><li id="p11" class="parent"><span></span><a href="/api/persister-libsql/"><code>persister-libsql</code></a></li><li id="p12" class="parent"><span></span><a href="/api/persister-partykit-client/"><code>persister-partykit-client</code></a></li><li id="p13" class="parent"><span></span><a href="/api/persister-partykit-server/"><code>persister-partykit-server</code></a></li><li id="p14" class="parent"><span></span><a href="/api/persister-pglite/"><code>persister-pglite</code></a></li><li id="p15" class="parent"><span></span><a href="/api/persister-postgres/"><code>persister-postgres</code></a></li><li id="p16" class="parent"><span></span><a href="/api/persister-powersync/"><code>persister-powersync</code></a></li><li id="p17" class="parent"><span></span><a href="/api/persister-react-native-mmkv/"><code>persister-react-native-mmkv</code></a></li><li id="p18" class="parent"><span></span><a href="/api/persister-react-native-sqlite/"><code>persister-react-native-sqlite</code></a></li><li id="p19" class="parent"><span></span><a href="/api/persister-remote/"><code>persister-remote</code></a></li><li id="p20" class="parent"><span></span><a href="/api/persister-sqlite-bun/"><code>persister-sqlite-bun</code></a></li><li id="p21" class="parent"><span></span><a href="/api/persister-sqlite-wasm/"><code>persister-sqlite-wasm</code></a></li><li id="p22" class="parent"><span></span><a href="/api/persister-sqlite3/"><code>persister-sqlite3</code></a></li><li id="p23" class="parent"><span></span><a href="/api/persister-yjs/"><code>persister-yjs</code></a></li><li id="q" class="parent"><span></span><a href="/api/queries/"><code>queries</code></a></li><li id="r" class="parent"><span></span><a href="/api/relationships/"><code>relationships</code></a></li><li id="s49" class="parent"><span></span><a href="/api/schematizers/"><code>schematizers</code></a></li><li id="s50" class="parent"><span></span><a href="/api/schematizer-arktype/"><code>schematizer-arktype</code></a></li><li id="s51" class="parent"><span></span><a href="/api/schematizer-effect/"><code>schematizer-effect</code></a></li><li id="s52" class="parent"><span></span><a href="/api/schematizer-typebox/"><code>schematizer-typebox</code></a></li><li id="s53" class="parent"><span></span><a href="/api/schematizer-valibot/"><code>schematizer-valibot</code></a></li><li id="s54" class="parent"><span></span><a href="/api/schematizer-yup/"><code>schematizer-yup</code></a></li><li id="s55" class="parent"><span></span><a href="/api/schematizer-zod/"><code>schematizer-zod</code></a></li><li id="s56" class="parent"><span></span><a href="/api/store/"><code>store</code></a></li><li id="s57" class="parent"><span></span><a href="/api/synchronizers/"><code>synchronizers</code></a></li><li id="s60" class="parent"><span></span><a href="/api/synchronizer-broadcast-channel/"><code>synchronizer-broadcast-channel</code></a></li><li id="s63" class="parent"><span></span><a href="/api/synchronizer-local/"><code>synchronizer-local</code></a></li><li id="s66" class="parent"><span></span><a href="/api/synchronizer-ws-client/"><code>synchronizer-ws-client</code></a></li><li id="s69" class="parent"><span></span><a href="/api/synchronizer-ws-server/"><code>synchronizer-ws-server</code></a></li><li id="s70" class="parent"><span></span><a href="/api/synchronizer-ws-server-durable-object/"><code>synchronizer-ws-server-durable-object</code></a></li><li id="s71" class="parent"><span></span><a href="/api/synchronizer-ws-server-simple/"><code>synchronizer-ws-server-simple</code></a></li><li id="u" class="current parent open"><span></span><a href="/api/ui-react/"><code>ui-react</code></a><ul><li id="u/F47" class="parent"><span></span><a href="/api/ui-react/functions/">Functions</a></li><li id="u/TA25" class="parent"><span></span><a href="/api/ui-react/type-aliases/">Type Aliases</a></li></ul></li><li id="u2" class="parent"><span></span><a href="/api/ui-react-dom/"><code>ui-react-dom</code></a></li><li id="u3" class="parent"><span></span><a href="/api/ui-react-dom-charts/"><code>ui-react-dom-charts</code></a></li><li id="u4" class="parent"><span></span><a href="/api/ui-react-inspector/"><code>ui-react-inspector</code></a></li><li id="u5" class="parent"><span></span><a href="/api/ui-solid/"><code>ui-solid</code></a></li><li id="u6" class="parent"><span></span><a href="/api/ui-solid-dom/"><code>ui-solid-dom</code></a></li><li id="u7" class="parent"><span></span><a href="/api/ui-solid-inspector/"><code>ui-solid-inspector</code></a></li><li id="u8" class="parent"><span></span><a href="/api/ui-svelte/"><code>ui-svelte</code></a></li><li id="u9" class="parent"><span></span><a href="/api/ui-svelte-dom/"><code>ui-svelte-dom</code></a></li><li id="u10" class="parent"><span></span><a href="/api/ui-svelte-inspector/"><code>ui-svelte-inspector</code></a></li></ul></li></ul></li></ul></nav><article><nav><ul><li><a href="/">TinyBase</a></li><li><a href="/api/">API</a></li><li><a href="/api/ui-react/"><code>ui-react</code></a></li></ul></nav><section class="s1" id="/api/ui-react/" data-id="u"><h1><code>ui-react</code></h1><p>The <code>ui-react</code> module of the TinyBase project provides both hooks and components to make it easy to create reactive apps with <a href="/api/the-essentials/creating-stores/store/"><code>Store</code></a> objects.</p><p>The hooks in this module provide access to the data and structures exposed by other modules in the project. As well as immediate access, they all register listeners such that components using those hooks are selectively re-rendered when data changes.</p><p>The components in this module provide a further abstraction over those hooks to ease the composition of user interfaces that use TinyBase.</p><section class="s2"><h2>See also</h2><ul><li><a href="/guides/building-uis-with-react/">Building UIs With React</a> guide</li><li><a href="/guides/using-metrics/building-a-ui-with-metrics/">Building A UI With Metrics</a> guide</li><li><a href="/guides/using-indexes/building-a-ui-with-indexes/">Building A UI With Indexes</a> guide</li><li><a href="/guides/using-relationships/building-a-ui-with-relationships/">Building A UI With Relationships</a> guide</li><li><a href="/guides/using-queries/building-a-ui-with-queries/">Building A UI With Queries</a> guide</li><li><a href="/guides/using-checkpoints/building-a-ui-with-checkpoints/">Building A UI With Checkpoints</a> guide</li><li><a href="/demos/hello-world/hello-world-react/">Hello World (React)</a> demo</li><li><a href="/demos/countries/countries-react/">Countries (React)</a> demo</li><li><a href="/demos/todo-app/">Todo App</a> demos</li><li><a href="/demos/drawing/">Drawing</a> demo</li></ul></section><section class="s2"><h2>Since</h2><p>v1.0.0</p></section><section class="s2" id="/api/ui-react/functions/" data-id="u/F47"><h2>Functions</h2><ul><li><a href="/api/ui-react/functions/store-components/">Store components</a></li><li><a href="/api/ui-react/functions/queries-components/">Queries components</a></li><li><a href="/api/ui-react/functions/checkpoints-hooks/">Checkpoints hooks</a></li><li><a href="/api/ui-react/functions/indexes-hooks/">Indexes hooks</a></li><li><a href="/api/ui-react/functions/metrics-hooks/">Metrics hooks</a></li><li><a href="/api/ui-react/functions/persister-hooks/">Persister hooks</a></li><li><a href="/api/ui-react/functions/queries-hooks/">Queries hooks</a></li><li><a href="/api/ui-react/functions/relationships-hooks/">Relationships hooks</a></li><li><a href="/api/ui-react/functions/state-hooks/">State hooks</a></li><li><a href="/api/ui-react/functions/store-hooks/">Store hooks</a></li><li><a href="/api/ui-react/functions/synchronizer-hooks/">Synchronizer hooks</a></li><li><a href="/api/ui-react/functions/checkpoints-components/">Checkpoints components</a></li><li><a href="/api/ui-react/functions/context-components/provider/"><code>Provider</code></a> function</li><li><a href="/api/ui-react/functions/indexes-components/">Indexes components</a></li><li><a href="/api/ui-react/functions/metrics-components/metricview/"><code>MetricView</code></a> function</li><li><a href="/api/ui-react/functions/relationships-components/">Relationships components</a></li></ul></section><section class="s2" id="/api/ui-react/type-aliases/" data-id="u/TA25"><h2>Type Aliases</h2><ul><li><a href="/api/ui-react/type-aliases/checkpoints/undoorredoinformation/"><code>UndoOrRedoInformation</code></a> type alias</li><li><a href="/api/ui-react/type-aliases/component/componentreturntype/"><code>ComponentReturnType</code></a> type alias</li><li><a href="/api/ui-react/type-aliases/identity/">Identity type aliases</a></li><li><a href="/api/ui-react/type-aliases/props/">Props type aliases</a></li></ul></section></section></article><aside></aside></main><footer><nav><a id="gh" href="https://github.com/tinyplex/tinybase" target="_blank">GitHub</a><a id="bs" href="https://bsky.app/profile/tinybase.bsky.social" target="_blank">Bluesky</a><a id="tw" href="https://x.com/tinybasejs" target="_blank">X / Twitter</a><a id="dc" href="https://discord.com/invite/mGz3mevwP8" target="_blank">Discord</a></nav><nav><a href="/">TinyBase <span id="version"></span></a> © 2022-</nav></footer><script>window.dataLayer=window.dataLayer||[];function g(){dataLayer.push(arguments);}g('js',new Date());g('config','G-D1MGR8VRWJ');</script></body></html>