JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 26463
  • Score
    100M100P100Q144853F
  • License MIT

Package Exports

  • react-xml-viewer

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-xml-viewer) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react-xml-viewer

Simple and configurable React component to prettify XMLs.

NPM JavaScript Style Guide

Codesandbox demo

Demo

Install

npm install --save react-xml-viewer

Usage

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

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)

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 -->)
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>)
overflowBreak bool false adjust the xml to fit in the parent width without overflowing

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' to react-app-env.d.ts

License

MIT © alissonmbr