alissonmbr / react-xml-viewer

MIT License
30 stars 20 forks source link

Buy me a coffee ☕

react-xml-viewer

NPM\ Simple and configurable React component to prettify XMLs.

Live demo

Edit react-xml-view

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

initialCollapsedDepth (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.

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

License

MIT © alissonmbr