react-xml-viewer
v3.0.1TypeScript
Simple xml viewer component for React
0/weekUpdated 7 months agoMITUnpacked: 410.4 KB
Published by alissonmbr
npm install react-xml-viewerreact-xml-viewer
\
Simple and configurable React component to prettify XMLs.
Live demo
Install
#### npm
``bash`
npm install --save react-xml-viewer
#### yarn
`bash`
yarn add react-xml-viewer
Usage
`jsx
import React, { Component } from 'react';
import XMLViewer from 'react-xml-viewer';
const xml = '
export function App() {
return (
);
}
`
Props
tsx
// Default: undefined
xml="World " // The size of the indentation.
// Default: 2
indentSize={2}
// When the xml is invalid, invalidXml component will be displayed.
// Default:
Invalid XML!
invalidXml={Invalid XML!} // Enable collapsing or expanding tags by clicking on them.
// Default: false
collapsible={false}
// When collapsible is true, this sets the level that will be started as collapsed.
// Default: undefined
initialCollapsedDepth={undefined}
// Displays line numbers on the left side when set to true.
// Default: false
showLineNumbers={false}
// An object to customize the theme.
theme={{
// Set the attribute key color (
// Default: #2a7ab0
attributeKeyColor: '#2a7ab0',
// Set the attribute value color ()
// Default: #008000
attributeValueColor: '#008000',
// Set the cdata element color ()
// Default: #1D781D
cdataColor: '#1D781D',
// Set the comment color ()
// Default: #aaa
commentColor: '#aaa',
// Set the font family
// Default: monospace
fontFamily: 'monospace',
// Set the separators colors (<, >, , =, )
// Default: #333
separatorColor: '#333',
// Set the tag name color (
// Default: #d43900
tagColor: '#d43900',
// Set the text color (Text )
// Default: #333
textColor: '#333',
// Set the line numbers container background color
// Default: #eee
lineNumberBackground: '#eee',
// Set the line numbers color
// Default: #222
lineNumberColor: '#222',
}}
/>
`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 function App() {
return (
);
}
``License
MIT © alissonmbr
Derived Projects
A list of open-source projects using react-xml-viewer:
- panel-xml: An XML widget for interactively exploring XML in Python notebooks and Panel data apps.