What is react-inspector?
The react-inspector npm package provides a set of development tools for inspecting React component hierarchies in the Chrome Developer Tools. It allows developers to view the current state and props of the components, and also provides a tree view to navigate through the component hierarchy. It is similar to the React Developer Tools extension but can be embedded directly into a React application.
What are react-inspector's main functionalities?
Object Inspector
The Object Inspector allows you to render an interactive tree view of a JavaScript object. It is useful for displaying objects in a more readable format within your React application.
{"<ObjectInspector data={{ a: 1, b: 'string', c: true, d: { nested: 'object' } }} />"}
Table Inspector
The Table Inspector provides a tabular view of arrays or objects. It is particularly useful for displaying a collection of objects in a table format, with sorting capabilities.
{"<TableInspector data={[{ id: 1, name: 'John Doe' }, { id: 2, name: 'Jane Doe' }]} />"}
DOM Inspector
The DOM Inspector is used to inspect and display the DOM tree of an HTML element. It can be used to explore the structure of a web page within a React component.
{"<DOMInspector data={document.body} />"}
Other packages similar to react-inspector
mobx-react-devtools
This package provides tools for debugging MobX React applications. It includes features like observing component updates and rendering performance. While it is specific to MobX, it offers similar inspection capabilities for state and component hierarchies as react-inspector.
why-did-you-render
This package helps track unnecessary re-renders in React applications. It notifies you about potentially avoidable re-renders, which can be useful for performance optimization. It complements react-inspector's functionality by focusing on render performance rather than state and prop inspection.
react-json-view
react-json-view is a package for displaying and editing JSON in a readable format. It provides a similar object inspection functionality as react-inspector but with additional features like editing and copying JSON data.
react-inspector
Power of Browser DevTools inspectors right inside your React app.
Find yourself using console.log
a lot to visualize your data inside a React App? Why use an imperative way and switch back and forth? Your app is the best console.
ObjectInspector
Like console.log
. Consider this as a glorified version of <pre>JSON.stringify(data, null, 2)</pre>
. Check out the interactive playground here.
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.
TableInspector
Like console.table
.
Install
NPM:
npm install react-inspector
API
<ObjectInspector />
The component accepts the following props:
data
: the Javascript object you would like to inspect
name
: specify the name of the root node, default to undefined
initialExpandedPaths
: an array containing all the paths that should be expanded when the component is initialized.
- A path is a dot separated string like
root.foo.bar
- By default you can refer to root's path as
'root'
, or the name prop if name is defined
- For example,
['root']
expands the first level nodes ['myCustomName']
can also expand the first level nodes if the component is setup as <ObjectInspector name="myCustomName" data={{/*...*/}} initialExpandedPaths={['myCustomName', /*...*/]}>
.['root.foo.bar']
expands the path root.foo.bar
if root.foo.bar
is an existing property
- You can use wildcard to expand all paths on a specific level
- For example, to expand all first level and second level nodes, use
['root', 'root.*']
<TableInspector />
The component accepts the following props:
data
: the Javascript object you would like to inspect, either an array or an object
columns
: An array of the names of the columns you'd like to display in the table
Usage
import {ObjectInspector, TableInspector} from 'react-inspector';
const MyComponent = (data) => (
<div>
<ObjectInspector data={data} />
<TableInspector data={data} />
</div>
)
let data = { };
ReactDOM.render(
<MyComponent data={data} />,
document.getElementById('root')
);
Checkout example/App.js
for more examples. Try embedding this inside a component's render() method to provide a live view for its props/state (Works even better with hot reloading).
Install the example
npm install && npm start
Open http://localhost:3000/example/index.html
Notes
react-object-inspector
package is renamed to react-inspector
, and <ObjectInspector/>
is now part of the new package.- Starting from 0.2.0, react-object-inspector uses inline styles and you don't need to include any additional CSS files.