@ivvitikhonov/react-xml-viewer

Install

npm install --save @ivvitikhonov/react-xml-viewer

Usage

import * as React from "react";

import { XmlViewer } from "@ivvitikhonov/react-xml-viewer";

const xml = "<hello>World</hello>";

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

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
collapsible	boolean	true	No	Whether the tree start as collapsed or not
indentSize	number	4	No	The number of spaces to indent each level
theme	object	undefined	No	The theme to use. When undefined, it uses the standard theme

Theme

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

Acknowledgement

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

License

MIT © ivvitikhonov