react-xml-viewer-2 v2.0.1

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

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

Usage

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

const xml = '<hello>World</hello>'

export default class App extends Component {
  render () {
    return (
      <div>
        <XMLViewer xml={xml} />
      </div>
    )
  }
}

Props

xml (string)

A xml string to prettify. Default: undefined Example: <hello>World</hello>

indentSize (number)

The size of the indentation. Default: 2

invalidXml (node)

When the xml is invalid, invalidXml will be returned. Default: Invalid XML!

collapsible (bool)

Allow collapse/expand tags by click on them When tag is collapsed its content and attributes are hidden. Only is shown Default: false

theme (object)

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 default class App extends Component {
  render () {
    return (
      <div>
        <XMLViewer xml={xml} theme={customTheme} />
      </div>
    )
  }
}

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