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.
lazy-object-view is intended to be a performant alternative to existing JSON visualization packages.
| 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.
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).
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. |
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent