\ Simple and configurable React component to prettify XMLs.
npm install --save react-xml-viewer
yarn add react-xml-viewer
import React, { Component } from 'react'
import XMLViewer from 'react-xml-viewer'
const xml = '<hello>World</hello>'
export function App() {
return (
<div>
<XMLViewer xml={xml} />
</div>
)
}
A xml string to prettify.\
Default: undefined\
Example: <hello>World</hello>
The size of the indentation.\ Default: 2
When the xml is invalid, invalidXml component will be returned.\
Default: <div>Invalid XML!</div>
Allow collapse/expand tags by click on them. When tag is collapsed its content and attributes are hidden.\ Default: false
When the collapsible is true, this set the level that will be started as collapsed. For example, if you want to everything starts as collapsed, set 0.\ Default: undefined
An object to customize the default theme.
Key | Type | Default | Description |
---|---|---|---|
attributeKeyColor | color | #2a7ab0 | Set the attribute key color (<tag attribute-key="hello" /> ) |
attributeValueColor | color | #008000 | Set the attribute value color (<tag attr="Attribute value"> ) |
cdataColor | color | #1D781D | Set the cdata element color (<![CDATA[some stuff]]> ) |
commentColor | color | #aaa | Set the comment color (<!-- this is a comment --> ) |
fontFamily | font | monospace | Set the font family |
separatorColor | color | #333 | Set the separators colors (<, >, </, />, =, <?, ?> ) |
tagColor | color | #d43900 | Set the tag name color (<tag-name /> ) |
textColor | color | #333 | Set the text color (<tag>Text</tag> ) |
Example: Changing attribute key and value color
import React, { Component } from 'react'
import XMLViewer from 'react-xml-viewer'
const xml = '<hello attr="World" />'
const customTheme = {
"attributeKeyColor": "#FF0000",
"attributeValueColor": "#000FF"
}
export function App() {
return (
<div>
<XMLViewer xml={xml} theme={customTheme} />
</div>
)
}
MIT © alissonmbr