Skip to content
A utility to convert valid XML documents into React elements.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github add additional change type to PR template (#34) Jan 17, 2018
src Adding Jest (#40) Feb 14, 2018
.npmignore Add nyc for coverage reports Dec 9, 2017
.nvmrc chore(deps): update node.js to 8.15 (#92) Jan 11, 2019
.travis.yml Create (#21) Dec 21, 2017


Converts an XML document into a React tree.

license Build Status Coverage Status

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 */);

Simple Example

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>

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>


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'

XMLToReact constructor

The XMLToReact class is instantiated with a map of converters.

  nodeName: converterFunction

convert( xml, data )

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


  • 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)
You can’t perform that action at this time.