react-inspector

react-inspector

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

Install

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 earlier version of React.

Getting started

<Inspector />

A shorthand for the inspectors.

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

<ObjectInspector />

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

How it works

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.

API

The component accepts the following props:

data: PropTypes.any: the Javascript object you would like to inspect

name: PropTypes.string: specify the optional name of the root node, default to undefined

expandLevel: PropTypes.number: an integer specifying to which level the tree should be initially expanded

expandPaths: PropTypes.oneOfType([PropTypes.string, PropTypes.array]): an array containing all the paths that should be expanded when the component is initialized, or a string of just one path

• 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={[' to expand all the way to the $.foo.bar node.
  • You can refer to array index paths using ['
  • 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

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')
);

npm install && npm run storybook

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

import { chromeLight } from 'react-inspector'

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

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')
);

npm install && npm run storybook

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

import { chromeLight } from 'react-inspector'

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

__INLINE_CODE_23__: show non-enumerable properties

__INLINE_CODE_24__: Sort object keys with optional compare function

When __INLINE_CODE_25__ is provided, keys of objects are sorted in alphabetical order except for arrays.

__INLINE_CODE_26__: Use a custom __INLINE_CODE_27__ to render the object properties (optional)

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

  import { ObjectRootLabel, 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} />;

<TableInspector />

Like __INLINE_CODE_29__.

API

The component accepts the following props:

__INLINE_CODE_30__: the Javascript object you would like to inspect, either an array or an object

__INLINE_CODE_31__: An array of the names of the columns you'd like to display in the table

<DOMInspector />

API

The component accepts the following props:

__INLINE_CODE_32__: the DOM Node you would like to inspect

Usage

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).

More Examples

Check out the storybook for more examples.

npm install && npm run storybook

Open http://localhost:9001/

Theme

By specifying the __INLINE_CODE_33__ prop you can customize the inspectors. __INLINE_CODE_34__ prop can be

1. a string referring to a preset theme (__INLINE_CODE_35__ or __INLINE_CODE_36__, default to __INLINE_CODE_37__)
2. or a custom object that provides the necessary variables. Checkout __INLINE_CODE_38__ for possible theme 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'}}/>

Roadmap

Type of inspectors:

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

Contribution

Contribution is welcome. Past contributors

Additional

• If you intend to capture __INLINE_CODE_39__s, you may want to look at __INLINE_CODE_40__.
• __INLINE_CODE_41__ package will be deprecated. __INLINE_CODE_42__ is now part of the new package __INLINE_CODE_43__.
• Why inline style? This document summarizes it well.

__INLINE_CODE_23__: show non-enumerable properties

__INLINE_CODE_24__: Sort object keys with optional compare function

When __INLINE_CODE_25__ is provided, keys of objects are sorted in alphabetical order except for arrays.

__INLINE_CODE_26__: Use a custom __INLINE_CODE_27__ to render the object properties (optional)

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

  import { ObjectRootLabel, 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} />;

<TableInspector />

Like __INLINE_CODE_29__.

API

The component accepts the following props:

__INLINE_CODE_30__: the Javascript object you would like to inspect, either an array or an object

__INLINE_CODE_31__: An array of the names of the columns you'd like to display in the table

<DOMInspector />

API

The component accepts the following props:

__INLINE_CODE_32__: the DOM Node you would like to inspect

Usage

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).

More Examples

Check out the storybook for more examples.

npm install && npm run storybook

Open http://localhost:9001/

Theme

By specifying the __INLINE_CODE_33__ prop you can customize the inspectors. __INLINE_CODE_34__ prop can be

1. a string referring to a preset theme (__INLINE_CODE_35__ or __INLINE_CODE_36__, default to __INLINE_CODE_37__)
2. or a custom object that provides the necessary variables. Checkout __INLINE_CODE_38__ for possible theme 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'}}/>

Roadmap

Type of inspectors:

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

Contribution

Contribution is welcome. Past contributors

Additional

• If you intend to capture __INLINE_CODE_39__s, you may want to look at __INLINE_CODE_40__.
• __INLINE_CODE_41__ package will be deprecated. __INLINE_CODE_42__ is now part of the new package __INLINE_CODE_43__.
• Why inline style? This document summarizes it well.

__INLINE_CODE_23__: show non-enumerable properties

__INLINE_CODE_24__: Sort object keys with optional compare function

When __INLINE_CODE_25__ is provided, keys of objects are sorted in alphabetical order except for arrays.

__INLINE_CODE_26__: Use a custom __INLINE_CODE_27__ to render the object properties (optional)

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

  import { ObjectRootLabel, 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} />;

<TableInspector />

Like __INLINE_CODE_29__.

API

The component accepts the following props:

__INLINE_CODE_30__: the Javascript object you would like to inspect, either an array or an object

__INLINE_CODE_31__: An array of the names of the columns you'd like to display in the table

<DOMInspector />

API

The component accepts the following props:

__INLINE_CODE_32__: the DOM Node you would like to inspect

Usage

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).

More Examples

Check out the storybook for more examples.

npm install && npm run storybook

Open http://localhost:9001/

Theme

By specifying the __INLINE_CODE_33__ prop you can customize the inspectors. __INLINE_CODE_34__ prop can be

1. a string referring to a preset theme (__INLINE_CODE_35__ or __INLINE_CODE_36__, default to __INLINE_CODE_37__)
2. or a custom object that provides the necessary variables. Checkout __INLINE_CODE_38__ for possible theme 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'}}/>

Roadmap

Type of inspectors:

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

Contribution

Contribution is welcome. Past contributors

Additional

• If you intend to capture __INLINE_CODE_39__s, you may want to look at __INLINE_CODE_40__.
• __INLINE_CODE_41__ package will be deprecated. __INLINE_CODE_42__ is now part of the new package __INLINE_CODE_43__.
• Why inline style? This document summarizes it well.

__INLINE_CODE_23__: show non-enumerable properties

__INLINE_CODE_24__: Sort object keys with optional compare function

When __INLINE_CODE_25__ is provided, keys of objects are sorted in alphabetical order except for arrays.

__INLINE_CODE_26__: Use a custom __INLINE_CODE_27__ to render the object properties (optional)

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

  import { ObjectRootLabel, 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} />;

<TableInspector />

Like __INLINE_CODE_29__.

API

The component accepts the following props:

__INLINE_CODE_30__: the Javascript object you would like to inspect, either an array or an object

__INLINE_CODE_31__: An array of the names of the columns you'd like to display in the table

<DOMInspector />

API

The component accepts the following props:

__INLINE_CODE_32__: the DOM Node you would like to inspect

Usage

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).

More Examples

Check out the storybook for more examples.

npm install && npm run storybook

Open http://localhost:9001/

Theme

By specifying the __INLINE_CODE_33__ prop you can customize the inspectors. __INLINE_CODE_34__ prop can be

1. a string referring to a preset theme (__INLINE_CODE_35__ or __INLINE_CODE_36__, default to __INLINE_CODE_37__)
2. or a custom object that provides the necessary variables. Checkout __INLINE_CODE_38__ for possible theme 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'}}/>

Roadmap

Type of inspectors:

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

Contribution

Contribution is welcome. Past contributors

Additional

• If you intend to capture __INLINE_CODE_39__s, you may want to look at __INLINE_CODE_40__.
• __INLINE_CODE_41__ package will be deprecated. __INLINE_CODE_42__ is now part of the new package __INLINE_CODE_43__.
• Why inline style? This document summarizes it well.

__INLINE_CODE_23__: show non-enumerable properties

__INLINE_CODE_24__: Sort object keys with optional compare function

When __INLINE_CODE_25__ is provided, keys of objects are sorted in alphabetical order except for arrays.

__INLINE_CODE_26__: Use a custom __INLINE_CODE_27__ to render the object properties (optional)

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

  import { ObjectRootLabel, 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} />;

<TableInspector />

Like __INLINE_CODE_29__.

API

The component accepts the following props:

__INLINE_CODE_30__: the Javascript object you would like to inspect, either an array or an object

__INLINE_CODE_31__: An array of the names of the columns you'd like to display in the table

<DOMInspector />

API

The component accepts the following props:

__INLINE_CODE_32__: the DOM Node you would like to inspect

Usage

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).

More Examples

Check out the storybook for more examples.

npm install && npm run storybook

Open http://localhost:9001/

Theme

By specifying the __INLINE_CODE_33__ prop you can customize the inspectors. __INLINE_CODE_34__ prop can be

1. a string referring to a preset theme (__INLINE_CODE_35__ or __INLINE_CODE_36__, default to __INLINE_CODE_37__)
2. or a custom object that provides the necessary variables. Checkout __INLINE_CODE_38__ for possible theme 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'}}/>

Roadmap

Type of inspectors:

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

Contribution

Contribution is welcome. Past contributors

Additional

• If you intend to capture __INLINE_CODE_39__s, you may want to look at __INLINE_CODE_40__.
• __INLINE_CODE_41__ package will be deprecated. __INLINE_CODE_42__ is now part of the new package __INLINE_CODE_43__.
• Why inline style? This document summarizes it well.

__INLINE_CODE_23__: show non-enumerable properties

__INLINE_CODE_24__: Sort object keys with optional compare function

When __INLINE_CODE_25__ is provided, keys of objects are sorted in alphabetical order except for arrays.

__INLINE_CODE_26__: Use a custom __INLINE_CODE_27__ to render the object properties (optional)

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

  import { ObjectRootLabel, 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} />;

<TableInspector />

Like __INLINE_CODE_29__.

API

The component accepts the following props:

__INLINE_CODE_30__: the Javascript object you would like to inspect, either an array or an object

__INLINE_CODE_31__: An array of the names of the columns you'd like to display in the table

<DOMInspector />

API

The component accepts the following props:

__INLINE_CODE_32__: the DOM Node you would like to inspect

Usage

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).

More Examples

Check out the storybook for more examples.

npm install && npm run storybook

Open http://localhost:9001/

Theme

By specifying the __INLINE_CODE_33__ prop you can customize the inspectors. __INLINE_CODE_34__ prop can be

1. a string referring to a preset theme (__INLINE_CODE_35__ or __INLINE_CODE_36__, default to __INLINE_CODE_37__)
2. or a custom object that provides the necessary variables. Checkout __INLINE_CODE_38__ for possible theme 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'}}/>

Roadmap

Type of inspectors:

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

Contribution

Contribution is welcome. Past contributors

Additional

• If you intend to capture __INLINE_CODE_39__s, you may want to look at __INLINE_CODE_40__.
• __INLINE_CODE_41__ package will be deprecated. __INLINE_CODE_42__ is now part of the new package __INLINE_CODE_43__.
• Why inline style? This document summarizes it well.