The React component to display an XML string
npm install @ivvitikhonov/react-xml-viewer
``bash`
npm install --save @ivvitikhonov/react-xml-viewer
`tsx
import * as React from "react";
import { XmlViewer } from "@ivvitikhonov/react-xml-viewer";
const xml = "
export const App = () =>
`
| Name | Type | Default | Required | Description |
| --- | --- | --- | --- | --- |
| xml | string | | Yes | The XML to display. XML should have UTF-8 character encoding, other encodings are not supported |true
| collapsible | boolean | | No | Whether the tree start as collapsed or not |4
| indentSize | number | | No | The number of spaces to indent each level |undefined
| theme | object | | No | The theme to use. When undefined, it uses the standard theme |
| Name | Type | Default | Description |
| --- | --- | --- | --- |
| attributeKeyColor | string | "#2a7ab0" | Set the attribute key color () |string
| attributeValueColor | | "#008000" | Set the attribute value color ( ) |string
| cdataColor | | "#1d781d" | Set the cdata element color () |string
| collapseIndicatorColor | | "#ae2c4c" | Set the collapse indicator color (+/-)string
| commentColor | | "#aaa" | Set the comment color ()string
| separatorColor | | "#333" | Set the separators colors (<, >, , />, =, , ?>)string
| tagColor | | "#d43900" | Set the tag name color () |string
| textColor | | "#333" | Set the text color () |boolean
| overflowBreak | | false | Adjust the xml to fit in the parent width without overflowing |
This XML Viewer is based on react-xml-viewer`, see the original here.
MIT © ivvitikhonov