@j3lte/react-xml-view

react-xml-view

A simple React component to display XML in a tree view.

Codesandbox Demo

Install

npm install --save @j3lte/react-xml-view

Usage

import React from 'react';
import { XmlView } from '@j3lte/react-xml-view';

const xml = '<hello>World</hello>'

export const App = () => {
  return (
	<XmlView xml={xml} />
  );
}

Note: The viewer will NOT show the XML declaration (example: <?xml version="1.0" encoding="UTF-8"?>). This is due to a limitation in the XML parser.

See this explanation

Props

Name	Type	Default	Required	Description
xml	string		Yes	The XML to display. XML should have UTF-8 character encoding, other encodings are not supported
classNames	object	undefined	No	The class names to use. See below for more information
cleanEmptyTextNodes	boolean	false	No	Try to clean up empty text nodes.
collapsed	boolean/number	false	No	Whether the tree start as collapsed or not. If this is a number (n > -1), it will be the level to collapse to. Root starts at level 0
collapsible	boolean	false	No	Whether the tree can be collapsed or not
indentSize	number	2	No	The number of spaces to indent each level
indentUseTabs	boolean	false	No	Use tabs instead of spaces for indentation
invalidXMLRenderer	Function	undefined	No	(error: Error) => JSX.Element. A function to render the error when the XML is invalid.
onClickElement	Function	undefined	No	(element: XmlElement) => void. A function to call when an element is clicked. The element is the XmlElement that was clicked.
parserOptions	object	undefined	No	The options to pass to the parser. See @rgrove/parse-xml API DOCS
theme	object/boolean	undefined	No	The theme to use. When undefined, it uses the standard theme. If this is set to false, it completely disables the theme. See below for more information

Theme

The theme object can contain the following properties:

Name	Type	Default	Description
attributeKeyColor	string / boolean	"#2a7ab0"	set the attribute key color (<tag attribute-key="hello" />)
attributeValueColor	string / boolean	"#008000"	set the attribute value color ( <tag attr="Attribute value">)
cdataColor	string / boolean	"#1D781D"	set the cdata element color (<![CDATA[some stuff]]>)
commentColor	string / boolean	"#aaa"	set the comment color (<!-- this is a comment -->)
separatorColor	string / boolean	"#333"	set the separators colors (<, >, </, />, =, <?, ?>)
tagColor	string / boolean	"#d43900"	set the tag name color (<tag-name />)
textColor	string / boolean	"#333"	set the text color (<tag>Text</tag>)
overflowBreak	boolean	false	adjust the xml to fit in the parent width without overflowing

Note: for each color in the theme, you can set it to false to disable it. It will omit the style attribute for that color.

Class names

The class names object can contain the following properties, feel free to override them.

Name	Default
attributeList	"xml-attribute-list"
attribute	"xml-attribute"
attributeKey	"xml-attribute-key"
attributeValue	"xml-attribute-value"
cdata	"xml-cdata"
comment	"xml-comment"
element	"xml-element"
elementChildren	"xml-element-children"
instruction	"xml-instruction"
separator	"xml-separator"
tag	"xml-tag"
text	"xml-text"

Acknowledgement

This XML Viewer is based on react-xml-viewer, see the original here.

License

MIT © Jelte Lagendijk