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.
Permalink
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
test
.babelrc
.eslintignore
.eslintrc.js
.gitignore
.npmignore Add nyc for coverage reports Dec 9, 2017
.npmrc
.nvmrc chore(deps): update node.js to 8.15 (#92) Jan 11, 2019
.travis.yml
CHANGELOG.md
CODE_OF_CONDUCT.md Create CODE_OF_CONDUCT.md (#21) Dec 21, 2017
CONTRIBUTING.md
LICENSE
README.md
jest.config.js
package-lock.json
package.json
renovate.json
rollup.config.js

README.md

XML-to-React

Converts an XML document into a React tree.

license Build Status Coverage Status

Proudly built by:

Prerequisites

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

Installation

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

This assumes you are using npm as your package manager.

Usage

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

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

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.

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