# @ethicdevs/json-tree-view

[![NPM](https://img.shields.io/npm/v/json-tree-view?color=red)](https://www.npmjs.com/package/json-tree-view)
[![MIT License](https://img.shields.io/github/license/EthicDevs/json-tree-view.svg?color=blue)](https://github.com/EthicDevs/json-tree-view/blob/master/LICENSE)
[![Travis CI Build](https://img.shields.io/travis/com/EthicDevs/json-tree-view.svg)](https://travis-ci.com/EthicDevs/json-tree-view)
[![Average issue resolution time](https://isitmaintained.com/badge/resolution/EthicDevs/json-tree-view.svg)](https://isitmaintained.com/project/EthicDevs/json-tree-view)
[![Number of open issues](https://isitmaintained.com/badge/open/EthicDevs/json-tree-view.svg)](https://isitmaintained.com/project/EthicDevs/json-tree-view)

A simple JSON Tree View that renders nodes using HTML5 `details` + `summary`

## Installation

> **Note:** @ethicdevs/json-tree-view is not dependent on any package.

```bash
$ yarn add @ethicdevs/json-tree-view
# or
$ npm i @ethicdevs/json-tree-view
```

## Usage

```ts
import { renderJSONTreeView } from "@ethicdevs/json-tree-view";

const containerEl = document.querySelector("#json-tree-view-container");
const data = {
  a1: 123,
  b1: "xyz",
  c1: [1.2, 3.4, "5.6", false],
  d1: { cid: "WK2WHS", name: "peter", unique: false },
};

// Magic!
const treeViewAPI = renderJSONTreeView(data, containerEl, {
  expanded: true, // Or set it to false so nodes are not expanded by default.
});

// Then control it!
treeViewAPI.toggle();
treeViewAPI.hideChildren();
treeViewAPI.showChildren();
```