XML-to-React

Converts an XML document into a React tree.

Typescript port of unmaintained Conde Nast implementation.


Prerequisites

This library may only be used in projects using React version 0.13.x or greater.

Installation

``sh
npm install --save xml-to-react
`

This assumes you are using npm as your package manager.

Usage

`js
import XMLToReact from 'xml-to-react';

const xmlToReact = new XMLToReact({/ converters /});
const reactTree = xmlToReact.convert(/ XML string /);
`

$3

Convert XML nodes into DOM elements with any provided attributes

`js
import ReactDOM from 'react-dom';
import XMLToReact from 'xml-to-react';
import MyListItem from './MyListItem';

const xmlToReact = new XMLToReact({
Example: (attrs) => ({ type: 'ul', props: attrs }),
Item: (attrs) => ({ type: MyListItem, props: attrs })
});

const reactTree = xmlToReact.convert(

one
two
three

);

ReactDOM.render('app-container', reactTree);
`

`jsx
export default function MyListItem({ children, i }) {
return

{children}

;
}
`

This example would render the following:

`html

• one


• two


• three

`

$3

Converters are required mapping functions that define how an XML node should be converted to React. A converter must return an object in the format { type, [props] }, which is intended to be passed to React.createElement.

- type - required tagName, React component, or React fragment
- props - (optional) props object
- tagStack {string[]} - (optional - only passed if tagStackEnabled option is true). Current (xml document) tag name is at the top of the stack. Followed by parent, etc.

#### Example

`js
function myConverter(attributes) {
return {
type: 'div',
props: {
className: 'test'
}
}
}
`

#### Special Converter Names

If the Converter is named $TextNode, then this supplied converter will be applied to all Text Nodes.
This converter will be passed arguments value and data. (instead of the standard attributes and data).
value is the text node's text content.

``js

// Example of mapping all text nodes to a span with value='text node content' attribute.

const xmlToReact = new XMLToReact({
$TextNode: (value) => ({type: 'span', props: {value}})
}, {includeRawXmlAsProp: false});

const r = xmlToReact.convert('

hello

');

// r contains

``

$3

The XMLToReact class is instantiated with a map of converters.

`js
{
nodeName: converterFunction
}
`

for example:
`js
new XmlToReact(
{
FirstName : (attrs) => ({ type : 'div', props: attrs}),
LastName : (attrs) => ({ type : 'div', props: attrs}),
});
`

Options can XmlToReact also be passed to the XmlToReact constructor.

for example:
`js
new XmlToReact(
{
FirstName : (attrs) => ({ type : 'div', props: attrs}),
}, {includeRawXmlAsProp : true});
`

|option | description | type | default |
|------ | ----------- | ---- | ------- |
| includeRawXmlAsProp | include outer xml as property named raw | boolean | false |
| tagStackEnabled | pass tag stack array as third argument to converter function | boolean |false |

$3

- xml {string} - xml node or document
- data {Object}` - (optional) any data to be passed to all converters