@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