react-inspector


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

!''

!''

!''

Install

NPM:

``sh
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

$3

A shorthand for the inspectors.

- is equivalent to or if inspecting a DOM Node.
- is equivalent to .

$3

Like console.log. Consider this as a glorified version of

JSON.stringify(data, null, 2)

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={['$', '$.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

showNonenumerable: PropTypes.bool: show non-enumerable properties

sortObjectKeys: PropTypes.oneOfType([PropTypes.bool, PropTypes.func]): Sort object keys with optional compare function

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

nodeRenderer: PropTypes.func: Use a custom nodeRenderer to render the object properties (optional)

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

`js
import { ObjectRootLabel, ObjectLabel } from 'react-inspector'

const defaultNodeRenderer = ({ depth, name, data, isNonenumerable, expanded }) =>
depth === 0
?
: ;
`

$3

Like console.table.

#### API

The component accepts the following props:

data: PropTypes.oneOfType([PropTypes.array, PropTypes.object]): the Javascript object you would like to inspect, either an array or an object

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

$3

#### API

The component accepts the following props:

data: PropTypes.object: the DOM Node you would like to inspect

#### Usage

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

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

const MyComponent = ({ data }) =>


let data = { / ... / };

ReactDOM.render(
,
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).

$3

Check out the storybook for more examples.

`sh
npm install && npm run storybook
`

Open http://localhost:9001/

Theme

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 theme variables.

Example 1: Using a preset theme:

`js

`

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

`js
import { chromeLight } from 'react-inspector'


`

Roadmap

Type of inspectors:

- [x] Tree style
- [x] common objects
- [x] DOM nodes
- [x] Table style
- [ ] Column resizer
- [ ] Group style

Contribution

Contribution is welcome. Past contributors

Additional

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