@gtk-grafana/react-json-tree NPM

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} />;

Theming

Styling is managed via scss modules and css variables, it should be straight-forward to override these styles in the consuming application. Basic theming is possible by overwriting the CSS variables in the _variables.scss.

For example:

<div
    style={
        {
            "--json-tree-label-color": "rgb(12, 127, 149)",
            "--json-tree-key-label-color": "rgb(71, 131, 0)",
            "--json-tree-label-value-color": "rgb(255, 48, 124)",
            "--json-tree-arrow-color": "rgb(12, 127, 149)",
            "--json-tree-value-text-wrap": "nowrap",
        } as React.CSSProperties
    }
>
    <JSONTree data={data}/>
</div>

#### Advanced Customization

```jsx
<div>
  <JSONTree
    data={data}
  />
</div>

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 getItemString={(type, data, itemType, itemString, keyPath)
  => <span>{itemType} {itemString}</span>}

But if you pass the following:

const getItemString = (type, data, itemType, itemString, keyPath)
    => (<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={([key]) => <strong>{key}</strong>}
  valueRenderer={(raw) => <em>{raw}</em>}
/>

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

For labelRenderer, you can provide a full path - see this PR.

Their full signatures are:

labelRenderer: function(keyPath, nodeType, expanded, expandable)
valueRenderer: function(valueAsString, value, ...keyPath)

Adding interactive elements:

Using the labelRenderer method, you can add interactive elements to the labels:

// ...
<JSONTree
    data={data}
    labelRenderer={(keyPath, nodeType, expanded) => {
        <span>
            <IconButton name={"plus-circle"} />
            <IconButton name={"minus-circle"} />
            <strong>{keyPath[0]}</strong>
        </span>
    }}
/>

More Options

shouldExpandNodeInitially: function(keyPath, data, level) - determines if node should be expanded when it first renders (root is expanded by default)
hideRoot: boolean - if true, the root node is hidden.
sortObjectKeys: boolean | function(a, b) - sorts object keys with compare function (optional). Isn't applied to iterable maps like Immutable.Map.
postprocessValue: function(value) - maps value to a new value
isCustomNode: function(value) - overrides the default object type detection and renders the value as a single value
collectionLimit: number - sets the number of nodes that will be rendered in a collection before rendering them in collapsed ranges
keyPath: (string | number)[] - overrides the initial key path for the root node (defaults to [root])