1.0.8 • Published 6 years ago

react-json-tree-view v1.0.8

Weekly downloads
14
License
MIT
Repository
github
Last release
6 years ago

react-json-tree-view

A package to show your JSON data for viewing purpose.

Installation

npm install react-json-tree-view

Demo

Check here

Example

import React from "react";
import ReactDOM from "react-dom";
import JsonView from "react-json-tree-view";

const data = {
  quiz: {
    sport: {
      q1: {
        question: "Which one is correct team name in NBA?",
        options: [
          "New York Bulls",
          "Los Angeles Kings",
          "Golden State Warriros",
          "Huston Rocket"
        ],
        answer: "Huston Rocket"
      }
    },
    maths: {
      q1: {
        question: "5 + 7 = ?",
        options: ["10", "11", "12", "13"],
        answer: "12"
      },
      q2: {
        question: "12 - 8 = ?",
        options: ["1", "2", "3", "4"],
        answer: "4"
      }
    }
  }
};

function App() {
  return (
    <div className="App">
      <JsonView data={data} />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Props

PropTypeDefault Value
dataobject (or) array{ 0: 'No data' }
keyColorstring#000
valueColorstring#000
borderLeftColorstring#A09696
sortArrowColorstring#000
bulletColorstring#000
boxBracketsColorstring#000
curlyBracketsColorstring#000

License

MIT