display json ui for react
npm install --save json-ui-react
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} />
}
}
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} |
MIT © Omrani-Mahmoud