React Inspector

Common errors

• Error: Invalid hook call. Hooks can only be called inside of the body of a function component.

  cause This error typically occurs when there's a React version mismatch, multiple instances of React are loaded, or rules of hooks are violated. It's common when `react-inspector`'s peer dependency for React is not satisfied correctly.
  fix Verify that your `react` and `react-dom` versions are compatible with the `react-inspector` version you are using (e.g., `react-inspector@3.x` for React 16.8.4+). Check for duplicate React installations in your `node_modules` and ensure consistent versions across your dependency tree.

• Module not found: Error: Can't resolve 'react-inspector' in 'path/to/your/component'

  cause The `react-inspector` package has not been installed, or the import path is incorrect, or the module bundler cannot find the package.
  fix First, ensure the package is installed: `npm install react-inspector` or `yarn add react-inspector`. If installed, check for typos in the import statement. Verify your module bundler's configuration (e.g., Webpack, Rollup) for resolving node modules.

• TypeError: Cannot read properties of undefined (reading 'x') (where 'x' is an internal property)

  cause This often happens when the `data` prop passed to `ObjectInspector` or `Inspector` is `undefined`, `null`, or an unexpected type when the component expects a valid JavaScript object or array.
  fix Always ensure that the `data` prop receives a valid, non-null, and non-undefined JavaScript object or array. Implement null/undefined checks before rendering the inspector if the data source can be transient.

• Prop type warning: The prop `expandPaths` is marked as required in `ObjectInspector`, but its value is `[object Object]`.

  cause This is a typical React prop type warning indicating that the `expandPaths` prop received an object instead of the expected string or array of strings, or it's malformed.
  fix Ensure `expandPaths` is either a single string (e.g., `'$'`) or an array of strings (e.g., `['$', '$.foo']`). Do not pass an object or other invalid types.

Warnings

• breaking Major version 9.x.x, like earlier major versions (v3, v4, v5, v6), may introduce breaking changes not explicitly detailed in the README excerpt. Always consult the official changelog for specific breaking changes when upgrading between major versions.
  Fix: Refer to the GitHub releases and changelog for specific migration guides. Thoroughly test your application after any major version upgrade to identify potential breaking changes.
• breaking `react-inspector` versions have specific React peer dependency requirements. For instance, version `3.0.2` and later are recommended for React 16.8.4 or newer, while `2.3.1` is for earlier React versions. Using an incompatible React version can lead to 'Invalid hook call' errors or other runtime issues.
  Fix: Ensure your `react` and `react-dom` versions meet the peer dependency requirements of your `react-inspector` version. Upgrade or downgrade `react-inspector` as necessary to match your React version. Use `npm install react-inspector@<version>` or `yarn add react-inspector@<version>`.
• gotcha When using the `expandPaths` prop, you must provide all parent paths leading to the desired node for it to be expanded. For example, to expand `$.foo.bar`, you need to specify `['$', '$.foo', '$.foo.bar']`.
  Fix: Always include the root path (`'$'`) and all intermediate parent paths in the `expandPaths` array to ensure correct expansion behavior.
• gotcha The component's tree state (e.g., expanded nodes) is saved at the root. This means the expansion state will be preserved even after the component is unmounted and re-mounted, which might be unexpected if you anticipate a fresh state on each render.
  Fix: If a fresh, collapsed state is desired on re-mount, consider managing the `expandLevel` prop dynamically or using a unique `key` prop on the inspector component to force a re-initialization if the data or context changes significantly.

Install

• npm install react-inspector npm
• yarn add react-inspector yarn
• pnpm add react-inspector pnpm

Imports

• Inspector
  wrong:

  const Inspector = require('react-inspector');

  correct:

  import { Inspector } from 'react-inspector';

  The primary component for general object inspection. It intelligently delegates to ObjectInspector or DOMInspector. ESM-only for modern React versions.
• ObjectInspector
  wrong:

  const { ObjectInspector } = require('react-inspector');

  correct:

  import { ObjectInspector } from 'react-inspector';

  Specifically designed for inspecting JavaScript objects in a tree-like structure. Primarily uses named exports.
• TableInspector
  wrong:

  const TableInspector = require('react-inspector').TableInspector;

  correct:

  import { TableInspector } from 'react-inspector';

  Renders array or object data in a tabular format, similar to `console.table`. Best used with named ESM imports.
• ObjectRootLabel, ObjectLabel
  wrong:

  import * as Inspector from 'react-inspector'; Inspector.ObjectRootLabel;

  correct:

  import { ObjectRootLabel, ObjectLabel } from 'react-inspector';

  These components are primarily used when providing a custom `nodeRenderer` prop to `ObjectInspector`, allowing granular control over how nodes are displayed.

Quickstart

This quickstart demonstrates the basic usage of <Inspector />, <ObjectInspector />, and <TableInspector /> components with sample data, showcasing their ability to display complex JavaScript objects and arrays in an interactive, formatted manner within a React application.

import React from 'react';
import { Inspector, ObjectInspector, TableInspector } from 'react-inspector';

interface AppProps {}

const sampleObject = {
  id: 1,
  name: "Alice",
  details: {
    age: 30,
    occupation: "Software Engineer",
    projects: [
      { name: "Project A", status: "completed" },
      { name: "Project B", status: "in progress", teamSize: 5 }
    ]
  },
  isActive: true,
  lastLogin: new Date()
};

const sampleArray = [
  { id: 1, name: "Item One", value: 100 },
  { id: 2, name: "Item Two", value: 200 },
  { id: 3, name: "Item Three", value: 150 }
];

const App: React.FC<AppProps> = () => {
  return (
    <div style={{ padding: '20px', fontFamily: 'monospace', backgroundColor: '#282c34', color: '#abb2bf' }}>
      <h1 style={{ color: '#61dafb' }}>React Inspector Examples</h1>

      <h2 style={{ marginTop: '30px', color: '#98c379' }}>&lt;Inspector /&gt; (shorthand)</h2>
      <p>A versatile inspector that intelligently renders objects or DOM nodes.</p>
      <div style={{ backgroundColor: '#1e2127', padding: '10px', borderRadius: '5px' }}>
        <Inspector data={sampleObject} name="sampleObject" expandLevel={2} />
      </div>

      <h2 style={{ marginTop: '40px', color: '#e5c07b' }}>&lt;ObjectInspector /&gt;</h2>
      <p>Displays a JavaScript object in a hierarchical tree view.</p>
      <div style={{ backgroundColor: '#1e2127', padding: '10px', borderRadius: '5px' }}>
        <ObjectInspector
          data={sampleObject.details}
          name="details"
          expandPaths={['$', '$.projects']}
          sortObjectKeys={true}
        />
      </div>

      <h2 style={{ marginTop: '40px', color: '#c678dd' }}>&lt;TableInspector /&gt;</h2>
      <p>Renders array or object data in a tabular format.</p>
      <div style={{ backgroundColor: '#1e2127', padding: '10px', borderRadius: '5px' }}>
        <TableInspector data={sampleArray} />
      </div>
    </div>
  );
};

export default App;