StoreInspector
The StoreInspector component renders a tool which allows you to view and edit the content of a Store in a debug web environment.
StoreInspector(props: StoreInspectorProps): ComponentReturnType| Type | Description | |
|---|---|---|
props | StoreInspectorProps | The props for this component. |
| returns | ComponentReturnType | The rendering of the inspector tool. |
See the <StoreInspector /> 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 StoreInspector component within it then renders the inspector tool.
const App = ({store}) => (
<Provider store={store}>
<Pane />
</Provider>
);
const Pane = () => <StoreInspector />;
const store = createStore().setTables({pets: {fido: {species: 'dog'}}});
const app = document.createElement('div');
ReactDOMClient.createRoot(app).render(<App store={store} />);
// ...
console.log(app.innerHTML.substring(0, 35));
// -> '<aside id="tinybaseStoreInspector">'
Since
v4.1.0