Converts an XML document into a React tree.
ℹ️ Fork of the unmaintained Conde Nast implementation to support React 18, upgrade dependencies and convert to Typescript.
This library may only be used in projects using React version 18 or greater.
npm install --save @superhuit/xml-to-react
This assumes you are using npm as your package manager.
import XMLToReact from '@superhuit/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 '@superhuit/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 fragmentprops
- (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 documentdata
{Object}
- (optional) any data to be passed to all converters
- jsonmltoreact demonstrated this technique using JsonML, and serves as motivation for this project.
- xml-to-react.
- 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)