TinyBase logoTinyBase

Inspector

Essential

The Inspector component renders a tool which allows you to view and edit the content of a Store in a debug web environment.

Inspector(props: InspectorProps): ComponentReturnType
TypeDescription
propsInspectorProps

The props for this component.

returnsComponentReturnType

The rendering of the inspector tool.

See the <Inspector /> demo for this component in action.

The component displays a nub in the corner of the screen which you may then click to interact with all the Store objects in the Provider component context.

The component's props identify the nub's initial location and panel state, though subsequent user changes to that will be preserved on each reload.

Example

This example creates a Provider context into which a default Store is provided. The Inspector component within it then renders the inspector tool.

import React from 'react';
import {createRoot} from 'react-dom/client';
import {createStore} from 'tinybase';
import {Provider} from 'tinybase/ui-react';
import {Inspector} from 'tinybase/ui-react-inspector';

const App = ({store}) => (
  <Provider store={store}>
    <Pane />
  </Provider>
);
const Pane = () => <Inspector />;

const store = createStore().setTables({pets: {fido: {species: 'dog'}}});
const app = document.createElement('div');
createRoot(app).render(<App store={store} />);
// ...
console.log(app.innerHTML.substring(0, 30));
// -> '<aside id="tinybaseInspector">'

Since

v5.0.0