Install & Compatibility
Where this runs
tested against v? · npm install
Install × environment matrix
Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux
muslnode 18–226 runs
build_error
glibcnode 18–226 runs
build_error
Code
Verified usage
Verified import paths — ran on the pinned version, not inferred.
Inspector
✓ import { Inspector } from 'react-inspector';
✗ const Inspector = require('react-inspector');
The primary component for general object inspection. It intelligently delegates to ObjectInspector or DOMInspector. ESM-only for modern React versions.
ObjectInspector
✓ import { ObjectInspector } from 'react-inspector';
✗ const { ObjectInspector } = require('react-inspector');
Specifically designed for inspecting JavaScript objects in a tree-like structure. Primarily uses named exports.
TableInspector
✓ import { TableInspector } from 'react-inspector';
✗ const TableInspector = require('react-inspector').TableInspector;
Renders array or object data in a tabular format, similar to `console.table`. Best used with named ESM imports.
ObjectRootLabel, ObjectLabel
✓ import { ObjectRootLabel, ObjectLabel } from 'react-inspector';
✗ import * as Inspector from 'react-inspector'; Inspector.ObjectRootLabel;
These components are primarily used when providing a custom `nodeRenderer` prop to `ObjectInspector`, allowing granular control over how nodes are displayed.
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' }}><Inspector /> (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' }}><ObjectInspector /></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' }}><TableInspector /></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;
Debug
Known issues
breakingMajor 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.fixRefer to the GitHub releases and changelog for specific migration guides. Thoroughly test your application after any major version upgrade to identify potential breaking changes.
affects: >=3.0.0
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.fixEnsure 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>`.
affects: <3.0.0 (for React <16.8.4), >=3.0.0 (for React >=16.8.4)
gotchaWhen 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']`.fixAlways include the root path (`'$'`) and all intermediate parent paths in the `expandPaths` array to ensure correct expansion behavior.
affects: >=2.0.0
gotchaThe 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.fixIf 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.
affects: >=2.0.0
Errors
Common errors & fixes
Error: Invalid hook call. Hooks can only be called inside of the body of a function component.
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.
fixVerify 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'
The `react-inspector` package has not been installed, or the import path is incorrect, or the module bundler cannot find the package.
fixFirst, 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)
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.
fixAlways 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]`.
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.
fixEnsure `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.
Audit
Dependencies
reactrequiredPeer dependency required for rendering React components.