-<!DOCTYPE html><html lang="en"><head><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="preload" as="image" href="/favicon.svg"><link rel="preload" as="image" href="/store-inspector.webp"><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>Inspecting Data | TinyBase</title><meta name="description" content="If you are using TinyBase with React, you can use its web-based inspector, the Inspector component, that allows you to reason about the data during development."><meta property="og:type" content="website"><meta property="og:title" content="Inspecting Data | TinyBase"><meta property="og:description" content="If you are using TinyBase with React, you can use its web-based inspector, the Inspector component, that allows you to reason about the data during development."><meta property="og:url" content="https://tinybase.org/guides/inspecting-data/"><meta property="og:image" content="https://tinybase.org/favicon_pad.png"><meta name="twitter:card" content="summary"><meta name="twitter:title" content="Inspecting Data | TinyBase"><meta name="twitter:description" content="If you are using TinyBase with React, you can use its web-based inspector, the Inspector component, that allows you to reason about the data during development."><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/guides/inspecting-data/"><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 open"><span></span><a href="/guides/">Guides</a><ul><li id="TB" class="parent"><span></span><a href="/guides/the-basics/">The Basics</a></li><li id="BUI" class="parent"><span></span><a href="/guides/building-uis/">Building UIs</a></li><li id="S" class="parent"><span></span><a href="/guides/schemas/">Schemas</a></li><li id="P" class="parent"><span></span><a href="/guides/persistence/">Persistence</a></li><li id="S2" class="parent"><span></span><a href="/guides/synchronization/">Synchronization</a></li><li id="I" class="parent"><span></span><a href="/guides/integrations/">Integrations</a></li><li id="UM" class="parent"><span></span><a href="/guides/using-metrics/">Using Metrics</a></li><li id="UI" class="parent"><span></span><a href="/guides/using-indexes/">Using Indexes</a></li><li id="UR" class="parent"><span></span><a href="/guides/using-relationships/">Using Relationships</a></li><li id="UC2" class="parent"><span></span><a href="/guides/using-checkpoints/">Using Checkpoints</a></li><li id="UQ" class="parent"><span></span><a href="/guides/using-queries/">Using Queries</a></li><li id="ID" class="current"><span></span><a href="/guides/inspecting-data/">Inspecting Data</a></li><li id="HTBIB" class="parent"><span></span><a href="/guides/how-tinybase-is-built/">How TinyBase Is Built</a></li><li id="FAQ"><span></span><a href="/guides/faq/">FAQ</a></li><li id="R"><span></span><a href="/guides/releases/">Releases</a></li></ul></li><li id="D2" class="parent"><span></span><a href="/demos/">Demos</a></li><li id="api" class="parent"><span></span><a href="/api/">API</a></li></ul></li></ul></nav><article><nav><ul><li><a href="/">TinyBase</a></li><li><a href="/guides/">Guides</a></li><li><a href="/guides/inspecting-data/">Inspecting Data</a></li></ul></nav><section class="s1" id="/guides/inspecting-data/" data-id="ID"><h1>Inspecting Data</h1><p>If you are using TinyBase with React, you can use its web-based inspector, the <a href="/api/the-essentials/using-react/inspector/"><code>Inspector</code></a> component, that allows you to reason about the data during development.</p><p><img src="/store-inspector.webp" alt="Inspector" title="Inspector"></p><p>(NB: Previous to v5.0, this component was called <code>StoreInspector</code>.)</p><h3 id="usage">Usage</h3><p>The component is available in the <a href="/api/ui-react-inspector/"><code>ui-react-inspector</code></a> module. Simply add the component inside a <a href="/api/the-essentials/using-react/provider/"><code>Provider</code></a> component (which is providing the <a href="/api/the-essentials/creating-stores/store/"><code>Store</code></a> context for the app that you want to be inspected). In total, the boilerplate will look something like this:</p><pre><code><span class="keyword">const</span> <span class="punctuation">{</span>Provider<span class="punctuation">,</span> useCreateStore<span class="punctuation">}</span> <span class="operator">=</span> TinyBaseUiReact<span class="punctuation">;</span>
0 commit comments