Json UI React

display json ui for react

Install

npm install --save json-ui-react

Usage

import React, { Component } from 'react'

import JsonDisplay from 'json-ui-react'
import 'json-ui-react/dist/index.css'

let data =[{
    "glossary": {
        "title": "example glossary",
        "GlossDiv": {
            "title": "S",
            "GlossList": {
                "GlossEntry": {
                    "ID": "SGML",
                    "SortAs": "SGML",
                    "GlossTerm": "Standard Generalized Markup Language",
                    "Acronym": "SGML",
                    "Abbrev": "ISO 8879:1986",
                    "GlossDef": {
                        "para": "A meta-markup language, used to create markup languages such as DocBook.",
                        "GlossSeeAlso": ["GML", "XML"]
                    },
                    "GlossSee": "markup"
                }
            }
        }
    }
}];
class Example extends Component {
  render() {
    return <JsonDisplay data={data} />
  }
}

Props

Prop name	Description	Default	Example
data	the data that will be displayed ( json )	-	data={[{ "name":"John", "age":30, "car":null }]}
height	the height of the json container ( will be scrollable automatically )	auto	height={400}

License

MIT © Omrani-Mahmoud