Package Exports

react-json-tree

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-json-tree) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react-json-tree

React JSON Viewer Component, Extracted from redux-devtools. Supports iterable objects, such as Immutable.js.

Usage

import JSONTree from 'react-json-tree'
// If you're using Immutable.js: `npm i --save immutable`
import { Map } from 'immutable'

// Inside a React component:
const json = {
  array: [1, 2, 3],
  bool: true,
  object: {
    foo: 'bar'
  }
  immutable: Map({ key: 'value' })
}

<JSONTree data={ json } />

Result:

Check out examples directory for more details.

Theming

You can pass a theme prop containing base16 theme data to change the theme. The example theme data can be found here.

(The theme data is also used by redux-devtools, and extracting it to a separate npm package is a TODO).

const theme = {
  scheme: 'monokai',
  author: 'wimer hazenberg (http://www.monokai.nl)',
  base00: '#272822',
  base01: '#383830',
  base02: '#49483e',
  base03: '#75715e',
  base04: '#a59f85',
  base05: '#f8f8f2',
  base06: '#f5f4f1',
  base07: '#f9f8f5',
  base08: '#f92672',
  base09: '#fd971f',
  base0A: '#f4bf75',
  base0B: '#a6e22e',
  base0C: '#a1efe4',
  base0D: '#66d9ef',
  base0E: '#ae81ff',
  base0F: '#cc6633'
};

<div style={{ backgroundColor: theme.base00 }}>
  <JSONTree data={ data } theme={ theme } />
</div>

Result (Monokai theme, dark background):

Customization

Customize CSS

You can pass the following properties to customize styling (all optional):

<JSONTree getArrowStyle={(type, expanded) => ({})}
    getItemStringStyle={(type, expanded) => ({})}
    getListStyle={(type, expanded) => ({})}
    getLabelStyle={(type, expanded) => ({})}
    getValueStyle={(type, expanded) => ({})} />

Here type is a string representing type of data, expanded is a current state for expandable items. Each function returns a style object, which extends corresponding default style.

For example, if you pass the following function:

const getStyle = (type, expanded) =>
  (expanded ? { textTransform: 'uppercase' } :
              { textTransform: 'lowercase' });

Then expanded nodes will all be in uppercase:

Customize Labels for Arrays, Objects, and Iterables

You can pass getItemString to customize the way arrays, objects, and iterable nodes are displayed (optional).

By default, it'll be:

<JSONTree getArrowStyle={(type, data, itemType, itemString)
  => <span>{itemType} {itemString}</span>}

But if you pass the following:

const getItemString = (type, data, itemType, itemString)
  => (<span> // {type}</span>);

Then the preview of child elements now look like this:

Customize Rendering

You can pass the following properties to customize rendered labels and values:

<JSONTree
    labelRenderer={raw => <strong>{raw}</strong>}
    valueRenderer={raw => <em>{raw}</em>}
/>

In this example the label and value will be rendered with <strong> and <em> wrappers respectively.

More Options

Add expandAll property to expand all nodes.

Credits

All credits to Dave Vedder (veddermatic@gmail.com), who wrote the original code as JSONViewer.
Extracted from redux-devtools, which contained ES6 + inline style port of JSONViewer by Daniele Zannotti (dzannotti@me.com)
Iterable support thanks to Daniel K.
npm package created by Shu Uesugi (shu@chibicode.com) per this issue.

Similar Libraries

License

MIT