Skip to content

Latest commit

 

History

History
125 lines (104 loc) · 2.52 KB

README.md

File metadata and controls

125 lines (104 loc) · 2.52 KB
Raw

xml-display-component

Render xml as expandable tree using ultrafast React.js

Here is how it looks in the browser:

example

Note: starting from version 0.1.0, its compatible with Angular.js (not using <a> tag)

Install

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>

Usage

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...

Using with Angular.js

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>

JSON representation of xml

The following xml:

<rootNode>  
    <child foo="bar">  
        <element1> value </element1>
        <element2> another value </element2>
    </child>
    <emptyElement/>  
</rootNode>

Must be represented as:

{
  "name": "rootNode",
  "nodes": [
    {
      "name": "child",
      "attrs": {"foo":"bar"},
      "nodes": [
        {
          "name": "element1",
          "value": "value"
        },
        {
          "name": "element2",
          "value": "another value"
        },
      ]
    },
    {
       "name": "emptyElement"
    }
  ]
};

See example/xml.js

Example

To run the example

  • change to example folder

  • install dependencies

    bower install

  • then navigate to index.html in your browser

Styling

See example/styles.css for recommended styling

To enable folding of elements use:

div.hidden {
  display: none;
}