@condenast/xml-to-react

1.0.0 • Public • Published

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 xml-to-react

This assumes you are using npm as your package manager.

Usage

import XMLToReact from '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 '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.

Readme

Keywords

none

Package Sidebar

Install

npm i @condenast/xml-to-react

Weekly Downloads

374

Version

1.0.0

License

Apache-2.0

Unpacked Size

354 kB

Total Files

21

Last publish

Collaborators

  • rajeshs32
  • agishan.lingasothy
  • vmishra2305
  • deepak_mohan
  • gshankar-in
  • pradeep_nayak
  • yarramanohar
  • somsekhardash
  • sabarni-condenast
  • dev-anand-94
  • anubalakrishnan
  • naveen1601
  • ganavi_j
  • sheetalparsa
  • vishnusimvisfear
  • vgoel
  • zeeshan-wani
  • vinayashreeram
  • mitchellstewart
  • nhrqz
  • ronjr_owlbear
  • snehak
  • raveena-ram
  • ankitkumar02
  • swati_verso
  • noman-cn
  • saahithisri
  • prasil1107
  • aditijhacn
  • imran-conde
  • saniyashk
  • mithunsathyanmits
  • sanjana_s
  • jyoti_3009
  • rajashreearvikar19
  • mala-shanbhag
  • ac432
  • ssingh417
  • nvillato
  • ricardofbarros
  • vmehrotr
  • speluri
  • jakir-coder
  • pranjal_sharma306500
  • tdscondenast
  • omsun22
  • midhunmurali001
  • saicharan7766
  • surabhidesai
  • suhitrathi-condenast
  • dkorenblyum
  • bbui
  • tejasvi-bg
  • vnallasa
  • vikas-sc
  • skumar7
  • cyrilpanicker-condenast
  • boygao1992
  • saikat_conde
  • imleodc
  • jasonmarlin
  • arunconde
  • roberlander
  • nprabhu-cn
  • juliendevlin
  • unviradiya
  • vinitha_thiagarajan
  • areadman
  • samruddhidube24
  • gapurdev
  • akshayjain10
  • utkarsh24
  • suma_k
  • piyush_das
  • cnmanju
  • cn-rahul-tiwari
  • dhanashri027
  • bharathikarunanithi
  • cn_priyanka14
  • prashant_singhparihar
  • m-mallikarjuna
  • smantriconde
  • machelslackatcondenast
  • karthik_cn
  • muthuprakashvelumani
  • issanjana
  • a-rena
  • colin-alexa
  • ramkun
  • namansingh_bhandari
  • cnarkhede
  • hebsibal_selvaraj
  • akeshavamurthy
  • priyanka_jha
  • klnarayanan
  • spoorthi.chandrashekar
  • erikveland
  • asinghconde
  • eunianina
  • raxs
  • vivekans
  • conde_jode
  • jordi.escude
  • nnasirov
  • unnatik
  • psundar
  • arhovale
  • rashmicn
  • siddhu-23
  • atp-engineering
  • danj-cn
  • maila-labib
  • anilc93
  • lavishgambhir
  • ksriniva2
  • andregcab
  • tchathur
  • kangkanbora
  • vinay-pr
  • josephrussell-cn
  • anaedzm
  • cn-connorbrannigan
  • prajwal_keshav
  • babincondenast
  • edistel
  • balar20
  • cn_jenkins
  • frandevinney
  • renovate
  • condenastadmin
  • copilot-robot
  • fennen529
  • fmadrie
  • gmedina
  • bigzed
  • biku
  • joshcondenast
  • rashmi-rao
  • imakshath
  • nishkalaadiga
  • niharanil
  • katiasfihivogue
  • alokreddycn
  • prakashn37
  • andi.anderson522
  • davidkofahl
  • tollmanz
  • amalamchtal
  • tdshap
  • sayeedcn
  • pitchfork-dev
  • danhaller
  • rajasinghcondenast
  • derrickatcn
  • tce
  • cnid_engineering
  • lilyhealey
  • prajaktak
  • manthanbhosle
  • psharma2
  • bhumikakhatri
  • igostu
  • cwoldt
  • mtzhang
  • manthanraut
  • drosenbaum
  • aswani_gupta
  • garryyao
  • yakshita
  • kalyanikasar
  • shreyapa
  • natelawscn
  • leahzxxz
  • katemont
  • eddleston
  • rtt
  • eshno
  • anwaukoni
  • eduardoveras
  • mrgentax
  • cl4m
  • spollini
  • fedeava
  • guidop91
  • nithya10
  • abigaild45
  • mb_dev
  • emilyatk
  • luis_gomez
  • karmenn
  • khiaraortiz
  • dmitriy_komarov-cn
  • jmcamacho
  • ishita_tiwari
  • hariprasath_cn
  • iamsuneeth
  • srikanthns
  • pushp-1992
  • sudiptacondenast
  • utkarsh_sanjivan-conde
  • mallica
  • shobith
  • agururajan
  • upenpanging
  • rjain198
  • ashwini_uppar
  • pmasade
  • jbergdol
  • suresharam
  • dhanraj_cn
  • pratik-gupta
  • ilankumaran
  • samtiffin
  • adityaanand534
  • chandan-condenast
  • vijayalakshmi-sunagar
  • namankumarsinha
  • sumitmaurya21
  • pashoka
  • nidhiarya-condenast
  • smita2022
  • ankushvijay93
  • likhita
  • priyankanandi
  • soumyagundu
  • cnrahulrkr
  • ramya-cn
  • dikshita_khandke
  • ambay_chaurasia
  • manikandancn
  • rghvndr99
  • mulla2