Converts an XML document into a React tree.

Proudly built by:

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

npm install --save @condenast/xml-to-react

This assumes you are using npm as your package manager.

import XMLToReact from '@condenast/xml-to-react'; const xmlToReact = new XMLToReact({/* converters */}); const reactTree = xmlToReact.convert(/* XML string */);

Convert XML nodes into DOM elements with any provided attributes

import ReactDOM from 'react-dom'; import XMLToReact from '@condenast/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(`  <Example name="simple">  <Item i="1">one</Item>  <Item>two</Item>  <Item>three</Item>  </Example> `); ReactDOM.render('app-container', reactTree);

export default function MyListItem({ children, i }) { return <li data-i={i}>{children}</li>; }

This example would render the following:

<div id="app-container"> <ul name="simple"> <li data-i="1">one</li> <li>two</li> <li>three</li> </ul> </div>

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

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

The XMLToReact class is instantiated with a map of converters.

{ nodeName: converterFunction }

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

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

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

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

• Daniel Taveras (@taveras)