<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 <a href="/">TinyBase</a> project provides both hooks and components to make it easy to create reactive apps with <a href="/api/store/interfaces/store/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 <a href="/">TinyBase</a>.</p><section class="s2"><h2>See also</h2><ul><li><a href="/guides/building-uis/">Building UIs</a> guides</li><li><a href="/guides/building-uis/">Building UIs</a> With <a href="/api/metrics/interfaces/metrics/metrics/"><code>Metrics</code></a> guide</li><li><a href="/guides/building-uis/">Building UIs</a> With <a href="/api/indexes/interfaces/indexes/indexes/"><code>Indexes</code></a> guide</li><li><a href="/guides/building-uis/">Building UIs</a> With <a href="/api/relationships/interfaces/relationships/relationships/"><code>Relationships</code></a> guide</li><li><a href="/guides/building-uis/">Building UIs</a> With <a href="/api/queries/interfaces/queries/queries/"><code>Queries</code></a> guide</li><li><a href="/guides/building-uis/">Building UIs</a> With <a href="/api/checkpoints/interfaces/checkpoints/checkpoints/"><code>Checkpoints</code></a> guide</li><li><a href="/demos/countries/">Countries</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" id="/api/ui-react/functions/" data-id="u/F23"><h2><a href="/api/ui-react/functions/">Functions</a></h2><p>These are the functions within the <a href="/api/ui-react/"><code>ui-react</code></a> module.</p><ul><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/store-hooks/">Store 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/">Context components</a></li><li><a href="/api/ui-react/functions/indexes-components/">Indexes components</a></li><li><a href="/api/ui-react/functions/metrics-components/">Metrics components</a></li><li><a href="/api/ui-react/functions/queries-components/">Queries components</a></li><li><a href="/api/ui-react/functions/relationships-components/">Relationships components</a></li><li><a href="/api/ui-react/functions/store-components/">Store components</a></li></ul></section><section class="s2" id="/api/ui-react/type-aliases/" data-id="u/TA19"><h2><a href="/api/ui-react/type-aliases/">Type Aliases</a></h2><p>These are the type aliases within the <a href="/api/ui-react/"><code>ui-react</code></a> module.</p><ul><li><a href="/api/ui-react/type-aliases/checkpoints/">Checkpoints type aliases</a></li><li><a href="/api/ui-react/type-aliases/component/">Component type aliases</a></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><li><a href="/api/ui-react/type-aliases/other/">Other type aliases</a></li></ul></section></section>