@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