react-xml-viewer

Simple and configurable React component to prettify XMLs, now supporting React 18.

This 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.

 

Install

``bash
npm install --save react-xml-viewer-2
`

Usage

`jsx
import React, { Component } from 'react'
import XMLViewer from 'react-xml-viewer-2'

const xml = 'World'

export default class App extends Component {
render () {
return (



)
}
}
`

Props

$3

A xml string to prettify.
Default: undefined
Example: World

$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 (Text)|
| 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 (



)
}
}
``

Run with typescript

If you have difficulties to run with typescript declare module 'react-xml-viewer-2' to react-app-env.d.ts

License

MIT © alissonmbr