@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

1,195

Version

1.0.0

License

Apache-2.0

Unpacked Size

354 kB

Total Files

21

Last publish

Collaborators

  • cyrilpanicker-condenast
  • sreenu-condenast
  • ronjr_owlbear
  • boygao1992
  • saikat_conde
  • ashanatesh
  • priyadarshinitao
  • naresh.kandhan
  • deepakmohan
  • husnabushra
  • ramjeetm
  • imleodc
  • skumar3conde
  • mounika-boyapati
  • nagaraja_h
  • jasonmarlin
  • arunconde
  • roberlander
  • josemanuel.barea.ortiz
  • nprabhu-cn
  • sahildshah1
  • jmundycn
  • juliendevlin
  • sheetalparsa
  • unviradiya
  • ssingh417
  • dev-anand-94
  • vinitha_thiagarajan
  • prasil1107
  • rgunton-conde
  • swarupshankar
  • areadman
  • abhishek_pandey_cn
  • vchand-cn
  • harsh_condenast
  • swati_verso
  • samruddhidube24
  • gapurdev
  • akshayjain10
  • utkarsh24
  • suma_k
  • mohnish_vurity
  • piyush_das
  • kshitiz_choudhary
  • cnmanju
  • vvkudachi
  • vijeshrj
  • jkraus
  • vaseemakram
  • sharvanipatil
  • cn-rahul-tiwari
  • dhanashri027
  • mukarthik
  • blue-rigel
  • mguyromelle
  • bharathikarunanithi
  • cn_priyanka14
  • mehulpiruka
  • kishor-kumar07
  • ngsangeeta
  • prashant_singhparihar
  • snehak
  • shrutinivedita
  • sandhya_rani
  • cedric_mascarenhas
  • m-mallikarjuna
  • imran-conde
  • smantriconde
  • machelslackatcondenast
  • sachin-ns
  • jorge_guerra2
  • pratima_cn
  • harsha_mahadevaiah
  • richa_cn
  • karthik_cn
  • muthuprakashvelumani
  • imleo_conde
  • issanjana
  • a-rena
  • colin-alexa
  • bxh-io-cn
  • benknowlesnews
  • timklimowicz
  • ramkun
  • kamal_conde
  • aditijhacn
  • namansingh_bhandari
  • max-prin
  • cnarkhede
  • nrajeshnpm
  • vinothkumar_bala
  • aksingh5
  • shashank_jaiswal
  • saicharan7766
  • vineethd
  • hebsibal_selvaraj
  • akeshavamurthy
  • priyanka_jha
  • saniyashk
  • jbs-cn
  • gargi-c
  • hippolin
  • klnarayanan
  • cn_joy_sen
  • cn-andres
  • ganavi_j
  • sellapandi1998
  • jsharma-cn
  • spoorthi.chandrashekar
  • venkatesh547
  • dinakar25
  • hegdem
  • erikveland
  • asinghconde
  • joselee43
  • eunianina
  • gchaithra
  • patternwise
  • omar.wl
  • andrixb
  • raxs
  • vivekans
  • susel_retana
  • praveenppk
  • rafalpuche
  • conde_jode
  • subbiah_ramakrishna
  • fernandolara23
  • sarahshincn
  • jordi.escude
  • nnasirov
  • unnatik
  • tania.delatorre
  • mniewiera-cn
  • vinayashreeram
  • mohitsharma-news
  • aaaanti
  • psundar
  • wljoel
  • arhovale
  • sgdurham
  • fsanchezvilela
  • alfonsocondenast
  • rashmicn
  • slarty667
  • christinahara
  • nanjacn
  • siddhu-23
  • atp-engineering
  • katiasfihi
  • luisenriquegutierrez
  • akhil_npm_condenast
  • danj-cn
  • sudeshna_cn
  • vikash_cn
  • lakshmi.priya
  • sumanth_cn
  • shahu_cn
  • utsav_cn
  • mmorris9
  • maila-labib
  • mala-shanbhag
  • anilc93
  • lavishgambhir
  • vmanzanilla
  • tdscondenast
  • nitish-tandia
  • murali-condenast
  • alejandroaltf4dev
  • omsun22
  • ksriniva2
  • aleccuster_cn
  • andregcab
  • bhoopalt
  • niclasbork
  • pramita21
  • tchathur
  • kangkanbora
  • suhas-cn
  • vinay-pr
  • rjcn
  • vikramchowdary_parimi
  • sugumarv
  • josephrussell-cn
  • seking31
  • eliza.nieves
  • anaedzm
  • naveen1601
  • kajal-sikka
  • cn-connorbrannigan
  • prajwal_keshav
  • arjunpa
  • sharique10
  • babincondenast
  • cn-oramirez
  • guru05111984
  • subinjoeconde
  • edistel
  • saahithisri
  • balar20
  • s_dwivedi
  • nhrqz
  • monicar
  • richsancho
  • tanya-sah
  • cn_jenkins
  • frandevinney
  • renovate
  • jyoti_3009
  • r0r71z
  • jaemega
  • aman-shinde-07
  • condenastadmin
  • angrymongoose
  • copilot-robot
  • cry4dawn_2000
  • fennen529
  • fmadrie
  • gkilian
  • gmedina
  • bigzed
  • raagul-conde
  • stan
  • stanley
  • andi.anderson522
  • tamal_banerjee
  • davidkofahl
  • biku
  • taniabhullar
  • dkorenblyum
  • tollmanz
  • amalamchtal
  • tdshap
  • nidhi-tcs
  • rishutcs
  • sayeedcn
  • pitchfork-dev
  • danhaller
  • rajasinghcondenast
  • derrickatcn
  • tce
  • lboylan
  • cnid_engineering
  • lilyhealey
  • varun9110
  • megrymo
  • prajaktak
  • manthanbhosle
  • rutujavetal
  • niharanil
  • psharma2
  • bhumikakhatri
  • sarthak_mohanty
  • igostu
  • rajashreearvikar19
  • tobe998
  • cwoldt
  • ndi
  • nishkala
  • sahana2104
  • mladhane
  • mtzhang
  • manthanraut
  • jfrederick12
  • rajashree-devaraj
  • sdconde
  • rigelsong
  • drosenbaum
  • roopeshrkn
  • aswani_gupta
  • garryyao
  • charuagrawal
  • sabarni-condenast
  • yakshita
  • kalyanikasar
  • talk2rajeev
  • shreyapa
  • stefanpenner
  • natelawscn
  • bbui
  • alexli
  • brian_mathews
  • crmartin
  • leahzxxz
  • hmehta06
  • srigurutcs
  • husheric
  • katemont
  • eddleston
  • rtt
  • eshno
  • jcorcino
  • anwaukoni
  • richardsjustind
  • eduardoveras
  • mrgentax
  • thehiddenhaku
  • cl4m
  • spollini
  • fedeava
  • sasha04
  • guidop91
  • gostfield
  • nithya10
  • satnam_gandhi
  • abigaild45
  • mb_dev
  • rmohamma
  • emilyatk
  • asolovyev
  • vaishnavisenthilvel
  • stefano-sarioli
  • sarah-chekfa
  • luis_gomez
  • danielbaldwin
  • karmenn
  • khiaraortiz
  • dmitriy_komarov-cn
  • jhraue
  • sviatoslav_maslov
  • hcet
  • jmcamacho
  • ishita_tiwari
  • sanjana_s
  • hariprasath_cn
  • harinikiruba
  • condenastfr
  • iamsuneeth
  • suhitrathi-condenast
  • zeeshan-wani
  • imakshath
  • srikanthns
  • mitchellstewart
  • pushp-1992
  • anoopk-cn
  • mithunsathyanmits
  • surbhi_cn
  • vikasshetty
  • midhunmurali001
  • sudiptacondenast
  • salvador-ahumada
  • suba56
  • skt-dev
  • ganeshnca
  • belal_kazmi
  • rszmacinski
  • prakashn37
  • utkarsh_sanjivan-conde
  • mallica
  • shobith
  • rashmi-rao
  • sahoo.sandhya
  • sardendu
  • agururajan
  • skumari
  • sikindar_mirza
  • ankitkumar02
  • avinash_iitb
  • upenpanging
  • speluri
  • anubalakrishnan
  • sbhattac
  • rjain198
  • ashwini_uppar
  • pmasade
  • jbergdol
  • suresharam
  • vnallasa
  • dhanraj_cn
  • pratik-gupta
  • anita-y
  • arvipandey
  • sandesh4777
  • vishnusimvisfear
  • ilankumaran
  • samtiffin
  • harsha-condenast
  • adityaanand534
  • rkamble
  • chandan-condenast
  • pratham7674
  • alokreddycn
  • anurag-cn
  • odtoribio
  • pranjal_sharma306500
  • vijayalakshmi-sunagar
  • helena-ong
  • namankumarsinha
  • grannitsejdiu
  • rkharecondenast
  • sumitmaurya21
  • pashoka
  • shubham_condenast
  • sourav_condenast
  • tanmoy_condenast
  • nidhiarya-condenast
  • vmehrotr
  • smita2022
  • pariharcondenast
  • subiabre
  • snehadg
  • sourav909
  • surabhidesai
  • syed_faizan
  • raveena-ram
  • statavar
  • jatinbabbarcondenast
  • ankushvijay93
  • likhita
  • indu-sagi
  • jakir-coder
  • priyankanandi
  • nikhilcondenast
  • stahirah
  • sparganiha-cn
  • aswanth_condenast
  • vinay_kumar
  • rajeswari-cn
  • soumyagundu
  • cnrahulrkr
  • ramya-cn
  • dikshita_khandke
  • somsekhardash
  • ambay_chaurasia
  • manikandancn
  • rghvndr99
  • shubhamkheracn
  • akhil_pasham
  • mulla2
  • spandey10
  • srawat-cn