@alexkuz/react-object-inspector

Simple object inspector styled similarly to Chrome DevTools (temporary fork)

Stats

StarsIssuesVersionUpdatedCreatedSize
@alexkuz/react-object-inspector
000.1.5-patch6 years ago6 years agoMinified + gzip package size for @alexkuz/react-object-inspector in KB

Readme

react-object-inspector

npm version

Simple object inspector made with React styled similarly to Chrome DevTools. You can use this tool to inspect Javascript Objects as an alternative to <pre>JSON.stringify(data, null, 2)</pre>.

Demo

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.

Install

NPM:

npm install react-object-inspector

CSS:

<link rel="stylesheet" type="text/css" href="path/to/react-object-inspector.css">

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

Usage

import ObjectInspector from 'react-object-inspector';
let data = { /* ... */ };

React.render(
    <ObjectInspector data={ data } />,
    document.getElementById('objectInspector')
);

Install the example

npm install && npm start

Open http://localhost:3000/example/index.html

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.