/react-object-inspector

Simple object inspector made with React

Primary LanguageJavaScriptMIT LicenseMIT

react-object-inspector

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

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 inpsect

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