react-xml-viewer v2.0.1

Buy me a coffee ☕

react-xml-viewer

\ Simple and configurable React component to prettify XMLs.

Live demo

Install

npm

npm install --save react-xml-viewer

yarn

yarn add react-xml-viewer

Usage

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>
    )
}

Props

xml (string)

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

indentSize (number)

The size of the indentation.\ Default: 2

invalidXml (JSX.Element)

When the xml is invalid, invalidXml component will be returned.\ Default: <div>Invalid XML!</div>

collapsible (boolean)

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

initalCollapsedDepth (number)

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

theme (object)

An object to customize the default theme.

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>
  )
}

License

MIT © alissonmbr