Simple and configurable React component to prettify XMLs, now supporting React 18.
npm install react-xml-viewer-2This is a fork of https://github.com/alissonmbr/react-xml-viewer and the only adjustment done so far was bumping up the peer dependency version for React.
 

``bash`
npm install --save react-xml-viewer-2
`jsx
import React, { Component } from 'react'
import XMLViewer from 'react-xml-viewer-2'
const xml = '
export default class App extends Component {
render () {
return (
Props
$3
A xml string to prettify.
Default: undefined
Example: $3
The size of the indentation.
Default: 2$3
When the xml is invalid, invalidXml will be returned.
Default: Invalid XML!$3
Allow collapse/expand tags by click on them
When tag is collapsed its content and attributes are hidden. Only is shown
Default: false
$3
| Key | Type | Default | Description |
| --- | ---- | ------- | ----------- |
| attributeKeyColor | color | #2a7ab0 | set the attribute key color (
) |
| attributeValueColor | color | #008000 | set the attribute value color ( ) |
| cdataColor | color | #1D781D | set the cdata element color () |
| commentColor | color | #aaa | set the comment color ()
| separatorColor | color | #333 | set the separators colors (<, >, , />, =, , ?>)
| tagColor | color | #d43900 | set the tag name color () |
| textColor | color | #333 | set the text color ()|
| overflowBreak | bool | false | adjust the xml to fit in the parent width without overflowing|Example:
Changing attribute key and value color
` jsx
import React, { Component } from 'react'
import XMLViewer from 'react-xml-viewer'const xml = ' '
const customTheme = {
"attributeKeyColor": "#FF0000",
"attributeValueColor": "#000FF"
}
export default class App extends Component {
render () {
return (
)
}
}
``MIT © alissonmbr