<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>