lazy-object-view

lazy-object-view is a simple JS object tree visualizer/explorer that adheres to "what you see is what's in the DOM". lazy-object-view is written in Typescript.

Why

lazy-object-view is intended to be a more performant alternative to existing JSON visualization packages such as react-json-tree when the size of the object to be rendered is very large. lazy-object-view attempts to minimize the number of DOM elements on the page by not rendering nodes until they are expanded, and culling nodes when they are closed.

Status

Browser Compatability

| Browser | Result | | ------------- | ------------- | | Chrome 71 on Mac | 1.1.0 Tested Working | | Firefox 64 on Mac | 1.1.0 Tested Working | | Safari 12 on Mac | 1.1.0 Tested Working |

Feel free to let me know of any compatability issues or issue pull requests to fix.

Usage

lazy-object-view is available as an npm package. Install this in npm with npm i lazy-object-view.

lazy-object-view has a react wrapper @ react-lazy-object-view

To use in a Typescript project simply import and construct a new LazyObjectView object.

import LazyObjectView from 'lazy-object-view'

const lazyObjectView = new LazyObjectView();
const targetElement = document.getElementById("root");
if (targetElement !== null) {
    lazyObjectView.render(targetElement, { "test": { "nested_key": "nested_value" }});
}

lazy-object-view is exported using webpack's umd (universal module definition).

Options

When calling render you can pass an options object as an optional third parameter with the following fields. All suboptions of the options object are optional.

| Option | Type | Description | | ------------- | ------------- | ------------- | | useRootElement | boolean | Setting this to true will collapse the entire object into a single root node. | | rootName | string | If useRootElement is set to true, this will optionally set the name of the root node element. If nothing is specified then this will default to root. | | showLoadingIndicator | boolean | When set, when expanding nodes this will attempt to show a loading indicator. Note that this will add an artificial 10ms delay to rendering. | | collapseStringsOver | number | Will collapse strings over this length and show an ellipses (...) with the amount of remaining text. These ellipses can be expanded by clicking. |

Screenshots