-<nav><ul><li><a href="/">TinyBase</a></li><li><a href="/api/">API</a></li><li><a href="/api/the-essentials/">The Essentials</a></li><li><a href="/api/the-essentials/using-react/">Using React</a></li><li><a href="/api/the-essentials/using-react/provider/"><code>Provider</code></a></li></ul></nav><section class="s1" id="/api/the-essentials/using-react/provider/" data-id="P34"><h1><code>Provider</code></h1><div class="essential">Essential</div><p>The <code>Provider</code> component is used to wrap part of an application in a context that provides default objects to be used by hooks and components within.</p><pre><code><span class="function"><a href="/api/the-essentials/using-react/provider/">Provider</a></span><span class="punctuation">(</span>props<span class="operator">:</span> <span class="type"><a href="/api/ui-react/type-aliases/props/providerprops/">ProviderProps</a></span> <span class="operator">&</span> <span class="punctuation">{</span>children<span class="operator">:</span> ReactNode<span class="punctuation">}</span><span class="punctuation">)</span><span class="operator">:</span> <span class="type"><a href="/api/ui-react/type-aliases/component/componentreturntype/">ComponentReturnType</a></span></code></pre><div class="table"><table><tr><th></th><th>Type</th><th>Description</th></tr><tr><th><code>props</code></th><td><code><span class="type"><a href="/api/ui-react/type-aliases/props/providerprops/">ProviderProps</a></span> <span class="operator">&</span> <span class="punctuation">{</span>children<span class="operator">:</span> ReactNode<span class="punctuation">}</span></code></td><td><p>The props for this component.</p></td></tr><tr><th class="right">returns</th><td><code><span class="type"><a href="/api/ui-react/type-aliases/component/componentreturntype/">ComponentReturnType</a></span></code></td><td><p></p><p>A rendering of the child components.</p><p></p></td></tr></table></div><p><a href="/api/the-essentials/creating-stores/store/"><code>Store</code></a>, <a href="/api/metrics/interfaces/metrics/metrics/"><code>Metrics</code></a>, <a href="/api/indexes/interfaces/indexes/indexes/"><code>Indexes</code></a>, <a href="/api/relationships/interfaces/relationships/relationships/"><code>Relationships</code></a>, <a href="/api/queries/interfaces/queries/queries/"><code>Queries</code></a>, <a href="/api/checkpoints/interfaces/checkpoints/checkpoints/"><code>Checkpoints</code></a>, <a href="/api/the-essentials/persisting-stores/persister/"><code>Persister</code></a>, and <a href="/api/the-essentials/synchronizing-stores/synchronizer/"><code>Synchronizer</code></a> objects can be passed into the context of an application and used throughout. One of each type of object can be provided as a default within the context. Additionally, multiple of each type of object can be provided in an <a href="/api/common/type-aliases/identity/id/"><code>Id</code></a>-keyed map to the <code>___ById</code> props.</p><p>Provider contexts can be nested and the objects passed in will be merged. For example, if an outer context contains a default <a href="/api/metrics/interfaces/metrics/metrics/"><code>Metrics</code></a> object and an inner context contains only a default <a href="/api/the-essentials/creating-stores/store/"><code>Store</code></a>, both the <a href="/api/metrics/interfaces/metrics/metrics/"><code>Metrics</code></a> objects and the <a href="/api/the-essentials/creating-stores/store/"><code>Store</code></a> will be visible within the inner context. If the outer context contains a <a href="/api/the-essentials/creating-stores/store/"><code>Store</code></a> named by <a href="/api/common/type-aliases/identity/id/"><code>Id</code></a> and the inner context contains a <a href="/api/the-essentials/creating-stores/store/"><code>Store</code></a> named by a different <a href="/api/common/type-aliases/identity/id/"><code>Id</code></a>, both will be visible within the inner context.</p><section class="s2"><h2>Examples</h2><p>This example creates a Provider context into which a <a href="/api/the-essentials/creating-stores/store/"><code>Store</code></a> and a <a href="/api/metrics/interfaces/metrics/metrics/"><code>Metrics</code></a> object are provided, one by default, and one named by <a href="/api/common/type-aliases/identity/id/"><code>Id</code></a>. Components within it then render content from both, without the need to have them passed as props.</p><pre><code><span class="keyword">import</span> React <span class="keyword">from</span> <span class="string">'react'</span><span class="punctuation">;</span>
0 commit comments