<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/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 TinyBase.</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"><h2>Since</h2><p>v1.0.0</p></section><section class="s2" id="/api/ui-react/functions/" data-id="u/F36"><h2>Functions</h2><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/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/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><li><a href="/api/ui-react/functions/other/">Other functions</a></li></ul></section><section class="s2" id="/api/ui-react/type-aliases/" data-id="u/TA23"><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>