Render xml as expandable tree using ultrafast React.js
Here is how it looks in the browser:
Note: starting from version 0.1.0, its compatible with Angular.js (not using
<a>tag)
bower install xml-display-component --save
<script src="bower_components/react/react-with-addons.min.js"></script>
<script src="bower_components/underscore/underscore-min.js"></script>
<script src="bower_components/xml-display-component/xml-display-component.js"></script>This package exposes global variable XmlDisplayComponent
Say you have following html
<body>
<div id="content"></div>
</body>Use following script to render xml in content div:
React.render(
React.createElement(XmlDisplayComponent, {data: xml, expanded: true}),
document.getElementById('content')
);where xml is JSON object - representation of xml file. See below...
React.js integrates nicely with Angular, simply wrap React component with angular directive:
// angular directive
function displayXmlTree() {
return {
scope: {
xml: '=displayXmlTree'
},
link: function(scope, el) {
React.render(
React.createElement(XmlDisplayComponent, {data: scope.xml, expanded: true}),
el[0]
);
}
};
}And then use it like this:
<!-- xmlJson is a scope variable with json representation of xml-->
<div display-xml-tree="xmlJson"></div><rootNode>
<child foo="bar">
<element1> value </element1>
<element2> another value </element2>
</child>
<emptyElement/>
</rootNode>{
"name": "rootNode",
"nodes": [
{
"name": "child",
"attrs": {"foo":"bar"},
"nodes": [
{
"name": "element1",
"value": "value"
},
{
"name": "element2",
"value": "another value"
},
]
},
{
"name": "emptyElement"
}
]
};See example/xml.js
To run the example
-
change to example folder
-
install dependencies
bower install -
then navigate to index.html in your browser
See example/styles.css for recommended styling
To enable folding of elements use:
div.hidden {
display: none;
}