@ivvitikhonov/react-xml-viewer


!xml-react-viewer

Install

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

Usage

`tsx
import * as React from "react";

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

const xml = "World";

export const App = () => ;
`

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 |

$3

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| attributeKeyColor | string | "#2a7ab0" | Set the attribute key color () |
| attributeValueColor | string | "#008000" | Set the attribute value color ( ) |
| cdataColor | string | "#1d781d" | Set the cdata element color () |
| collapseIndicatorColor | string | "#ae2c4c" | Set the collapse indicator color (+/-)
| commentColor | string | "#aaa" | Set the comment color ()
| separatorColor | string | "#333" | Set the separators colors (<, >, , =, )
| tagColor | string | "#d43900" | Set the tag name color () |
| textColor | string | "#333" | Set the text color (Text) |
| 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