tinybase/@types/ui-react-inspector/index.d.ts

A reactive data store and sync engine.

/**
 * The ui-react-inspector module of the TinyBase project provides a component to
 * help debug the state of your TinyBase stores and other objects.
 *
 * The component in this module uses the react-dom module and so is not
 * appropriate for environments like React Native.
 * @see <Inspector /> demo
 * @packageDocumentation
 * @module ui-react-inspector
 * @since v5.0.0
 */
import type {ComponentReturnType} from '../ui-react/index.d.ts';

/**
 * InspectorProps props are used to configure the Inspector component.
 * @category Props
 * @since v5.0.0
 */
export type InspectorProps = {
  /**
   * An optional string to indicate where you want the inspector to first
   * appear.
   * @category Prop
   * @since v5.0.0
   */
  readonly position?: 'top' | 'right' | 'bottom' | 'left' | 'full';
  /**
   * An optional boolean to indicate whether the inspector should start in the
   * opened state.
   * @category Prop
   * @since v5.0.0
   */
  readonly open?: boolean;
};

/**
 * The Inspector component renders a tool which allows you to view and edit the
 * content of a Store in a debug web environment.
 *
 * 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.
 * @param props The props for this component.
 * @returns The rendering of the inspector tool.
 * @example
 * This example creates a Provider context into which a default Store is
 * provided. The Inspector component within it then renders the inspector
 * tool.
 *
 * ```jsx
 * 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} />); // !act
 * // ... // !act
 * console.log(app.innerHTML.substring(0, 30));
 * // -> '<aside id="tinybaseInspector">'
 * ```
 * @category Development components
 * @since v5.0.0
 */
export function Inspector(props: InspectorProps): ComponentReturnType;