XML-to-React

NOTE: This fork exists solely for the andculture development team to immediately leverage contributions to the primary XML-to-React repository while waiting for approvals. When all changes are merged and published to NPM, projects should switch back to using the primary @condenaste/xml-to-react repository.

To use this fork, run npm install andculturecode.javascript.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 @condenast/xml-to-react
`

This assumes you are using npm as your package manager.

Usage

`js
import XMLToReact from '@condenast/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 '@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(

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

You can also register a default fallback converter by registering it with '*' as the key. This
converter will be used if no explicit converter is registered for the XML node name.

`js
{
'*': defaultConverterFunction
}
`

$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.

Maintainers

* Daniel Taveras (@taveras)