{"id":11730,"library":"react-inspector","title":"React Inspector","description":"React Inspector is a React component that brings the power of browser DevTools object and table inspectors directly into a React application. It allows developers to visualize JavaScript objects and data structures in a hierarchical, interactive tree view or a tabular format, similar to `console.log` or `console.table`. The current stable version is `9.0.0`. The library appears to have an active development and release cadence, with several major versions released over time, indicating ongoing maintenance and feature enhancements. Its key differentiator is providing a fully customizable, in-app debugging UI that operates within the application itself, eliminating the need to constantly switch to external browser developer tools. It also features intelligent state management, such as preserving tree expansion state across re-renders, which significantly improves the debugging experience for dynamic data. This makes it a powerful tool for developing and showcasing complex data structures directly within a user interface.","status":"active","version":"9.0.0","language":"javascript","source_language":"en","source_url":"https://github.com/xyc/react-inspector","tags":["javascript","devtools","inspector","object","object-inspector","react","react-component","reactjs","table"],"install":[{"cmd":"npm install react-inspector","lang":"bash","label":"npm"},{"cmd":"yarn add react-inspector","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-inspector","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency required for rendering React components.","package":"react","optional":false}],"imports":[{"note":"The primary component for general object inspection. It intelligently delegates to ObjectInspector or DOMInspector. ESM-only for modern React versions.","wrong":"const Inspector = require('react-inspector');","symbol":"Inspector","correct":"import { Inspector } from 'react-inspector';"},{"note":"Specifically designed for inspecting JavaScript objects in a tree-like structure. Primarily uses named exports.","wrong":"const { ObjectInspector } = require('react-inspector');","symbol":"ObjectInspector","correct":"import { ObjectInspector } from 'react-inspector';"},{"note":"Renders array or object data in a tabular format, similar to `console.table`. Best used with named ESM imports.","wrong":"const TableInspector = require('react-inspector').TableInspector;","symbol":"TableInspector","correct":"import { TableInspector } from 'react-inspector';"},{"note":"These components are primarily used when providing a custom `nodeRenderer` prop to `ObjectInspector`, allowing granular control over how nodes are displayed.","wrong":"import * as Inspector from 'react-inspector'; Inspector.ObjectRootLabel;","symbol":"ObjectRootLabel, ObjectLabel","correct":"import { ObjectRootLabel, ObjectLabel } from 'react-inspector';"}],"quickstart":{"code":"import React from 'react';\nimport { Inspector, ObjectInspector, TableInspector } from 'react-inspector';\n\ninterface AppProps {}\n\nconst sampleObject = {\n id: 1,\n name: \"Alice\",\n details: {\n age: 30,\n occupation: \"Software Engineer\",\n projects: [\n { name: \"Project A\", status: \"completed\" },\n { name: \"Project B\", status: \"in progress\", teamSize: 5 }\n ]\n },\n isActive: true,\n lastLogin: new Date()\n};\n\nconst sampleArray = [\n { id: 1, name: \"Item One\", value: 100 },\n { id: 2, name: \"Item Two\", value: 200 },\n { id: 3, name: \"Item Three\", value: 150 }\n];\n\nconst App: React.FC = () => {\n return (\n
\n

React Inspector Examples

\n\n

<Inspector /> (shorthand)

\n

A versatile inspector that intelligently renders objects or DOM nodes.

\n
\n \n
\n\n

<ObjectInspector />

\n

Displays a JavaScript object in a hierarchical tree view.

\n
\n \n
\n\n

<TableInspector />

\n

Renders array or object data in a tabular format.

\n
\n \n
\n
\n );\n};\n\nexport default App;\n","lang":"typescript","description":"This quickstart demonstrates the basic usage of , , and components with sample data, showcasing their ability to display complex JavaScript objects and arrays in an interactive, formatted manner within a React application."},"warnings":[{"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.","message":"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.","severity":"breaking","affected_versions":">=3.0.0"},{"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@` or `yarn add react-inspector@`.","message":"`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.","severity":"breaking","affected_versions":"<3.0.0 (for React <16.8.4), >=3.0.0 (for React >=16.8.4)"},{"fix":"Always include the root path (`'$'`) and all intermediate parent paths in the `expandPaths` array to ensure correct expansion behavior.","message":"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']`.","severity":"gotcha","affected_versions":">=2.0.0"},{"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.","message":"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.","severity":"gotcha","affected_versions":">=2.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"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.","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.","error":"Error: Invalid hook call. Hooks can only be called inside of the body of a function component."},{"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.","cause":"The `react-inspector` package has not been installed, or the import path is incorrect, or the module bundler cannot find the package.","error":"Module not found: Error: Can't resolve 'react-inspector' in 'path/to/your/component'"},{"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.","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.","error":"TypeError: Cannot read properties of undefined (reading 'x') (where 'x' is an internal property)"},{"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.","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.","error":"Prop type warning: The prop `expandPaths` is marked as required in `ObjectInspector`, but its value is `[object Object]`."}],"ecosystem":"npm"}