XML-to-React

Converts an XML document into a React tree.


_Proudly built by:_

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



`

$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

#### Example

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

$3

The XMLToReact class is instantiated with a map of converters.

`js
{
nodeName: converterFunction
}
`

$3

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

Prior Art

* jsonmltoreact demonstrated this technique using JsonML, and serves as motivation for this project.

Thanks

* xmldom for providing a solid XML parser.
* Rollup for simple and quick module bundling.
* React for the innovation.

Contributors

See the list of contributors who participated in writing this library.