Power of Browser DevTools inspectors right inside your React app. Check out the interactive playground or storybook.

NPM:

npm install react-inspector

Recommended versions:

• version 3.0.2: If you are using React 16.8.4 or later.
• version 2.3.1: If you are using an ealier version of React.

A shorthand for the inspectors.

• <Inspector/> is equivalent to <ObjectInspector> or <DOMInspector> if inspecting a DOM Node.
• <Inspector table/> is equivalent to <TableInspector>.

Like console.log. Consider this as a glorified version of <pre>JSON.stringify(data, null, 2)</pre>.

Tree state is saved at root. If you click to expand some elements in the hierarchy, the state will be preserved after the element is unmounted.

The component accepts the following props:

• The path string is similar to JSONPath.
  • It is a dot separated string like $.foo.bar. $.foo.bar expands the path $.foo.bar where $ refers to the root node. Note that it only expands that single node (but not all its parents and the root node). Instead, you should use expandPaths={['$', '$.foo', '$.foo.bar']} to expand all the way to the $.foo.bar node.
  • You can refer to array index paths using ['$', '$.1']
  • You can use wildcard to expand all paths on a specific level
    • For example, to expand all first level and second level nodes, use ['$', '$.*'] (equivalent to expandLevel={2})
• the results are merged with expandLevel

When sortObjectKeys={true} is provided, keys of objects are sorted in alphabetical order except for arrays.

• Instead of using the default nodeRenderer, you can provide a custom function for rendering object properties. The default nodeRender looks like this:

  import { ObjectRootLabel } from 'react-inspector'
  import { ObjectLabel } from 'react-inspector'
  
  const defaultNodeRenderer = ({ depth, name, data, isNonenumerable, expanded }) =>
    depth === 0
      ? <ObjectRootLabel name={name} data={data} />
      : <ObjectLabel name={name} data={data} isNonenumerable={isNonenumerable} />;
  

Like console.table.

The component accepts the following props:

The component accepts the following props:

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

// or use the shorthand
import Inspector from 'react-inspector';

const MyComponent = ({ data }) =>
  <div>
    <ObjectInspector data={data} />
    <TableInspector data={data} />

    <Inspector data={data} />
    <Inspector table data={data} />
  </div>

let data = { /* ... */ };

ReactDOM.render(
  <MyComponent data={data} />,
  document.getElementById('root')
);

Try embedding the inspectors inside a component's render() method to provide a live view for its props/state (Works even better with hot reloading).

Check out the storybook for more examples.

npm install && npm run storybook

Open http://localhost:9001/

By specifying the theme prop you can customize the inspectors. theme prop can be

1. a string referring to a preset theme ("chromeLight" or "chromeDark", default to "chromeLight")
2. or a custom object that provides the necessary variables. Checkout src/styles/themes for possible theming variables.

Example 1: Using a preset theme:

<Inspector theme="chromeDark" data={{a: 'a', b: 'b'}}/>

Example 2: changing the tree node indentation by inheriting the chrome light theme:

import { chromeLight } from 'react-inspector'

<Inspector theme={{...chromeLight, ...({ TREENODE_PADDING_LEFT: 20 })}} data={{a: 'a', b: 'b'}}/>

Type of inspectors:

• Tree style
  • common objects
  • DOM nodes
• Table style
  • Column resizer
• Group style

Contribution is welcome. Past contributors

• If you intend to capture console.logs, you may want to look at console-feed.
• react-object-inspector package will be deprecated. <ObjectInspector/> is now part of the new package react-inspector.
• Why inline style? This document summarizes it well.