https://github.com/carlosvega20/r-arbol

:herb: ReactJS Json Tree Viewer (54 lines) http://r-arbol.surge.sh/
https://github.com/carlosvega20/r-arbol

Last synced: 3 months ago
JSON representation

:herb: ReactJS Json Tree Viewer (54 lines) http://r-arbol.surge.sh/

• Host: GitHub
• URL: https://github.com/carlosvega20/r-arbol
• Owner: carlosvega20
• License: apache-2.0
• Created: 2016-10-28T19:08:06.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2022-12-13T14:32:55.000Z (over 2 years ago)
• Last Synced: 2025-02-18T00:29:26.243Z (4 months ago)
• Language: JavaScript
• Homepage:
• Size: 4.2 MB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 20
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# r-arbol

[![npm package](https://img.shields.io/badge/npm-0.3.0-brightgreen.svg)](https://www.npmjs.com/package/r-arbol)

ReactJS Json Tree Viewer (http://r-arbol.surge.sh/)

##Usage

npm install r-arbol

then in your code:

`import TreeView from "r-arbol"`

Based on a Json Object:

`var jsonObj = {

  "id": 1,

  "name": "Foo",

  "price": 123,

  "tags": [

    null,

    undefined,

    "label",

    function () {}

  ],

  "stock": {

    "warehouse": 300,

    "retail": 20,

    "isDisable": true

  }

}`

``

[](http://r-arbol.surge.sh/)

Skin:

Visual elements as '+', '-', '...', etc are separated from the logic and can be edited in CSS styles.

##Roadmap

- [x] Render Visual Tree

	- [x] Any Javascript Object (json, array, etc)

	- [x] Visual elements are separated from the logic

##TODO

- Unit test