https://github.com/ameerkat/lazy-object-view
A simple, lazy JS object tree visualizer that adheres to "what you see is what's in the DOM"
https://github.com/ameerkat/lazy-object-view
javascript lazy-loading npm-package tree-visualization typescript
Last synced: 29 days ago
JSON representation
A simple, lazy JS object tree visualizer that adheres to "what you see is what's in the DOM"
- Host: GitHub
- URL: https://github.com/ameerkat/lazy-object-view
- Owner: ameerkat
- License: mit
- Created: 2018-12-21T08:27:01.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2019-01-09T07:44:14.000Z (over 7 years ago)
- Last Synced: 2025-10-09T04:18:16.034Z (8 months ago)
- Topics: javascript, lazy-loading, npm-package, tree-visualization, typescript
- Language: TypeScript
- Homepage:
- Size: 435 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 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 performant alternative to existing JSON visualization packages.
## Status
[](https://travis-ci.org/ameerkat/lazy-object-view)
[](https://coveralls.io/github/ameerkat/lazy-object-view?branch=master)
### 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](https://www.npmjs.com/package/lazy-object-view). Install this in npm with `npm i lazy-object-view`.
lazy-object-view has a react wrapper @ [react-lazy-object-view](https://github.com/ameerkat/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
