{"id":22831624,"url":"https://github.com/condenast/xml-to-react","last_synced_at":"2025-08-22T00:31:26.854Z","repository":{"id":29471793,"uuid":"113376294","full_name":"CondeNast/xml-to-react","owner":"CondeNast","description":"A utility to convert valid XML documents into React elements.","archived":false,"fork":false,"pushed_at":"2024-04-05T23:06:15.000Z","size":726,"stargazers_count":41,"open_issues_count":53,"forks_count":19,"subscribers_count":12,"default_branch":"master","last_synced_at":"2024-04-13T20:03:54.428Z","etag":null,"topics":["javascript","react","xml"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/CondeNast.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-12-06T22:59:27.000Z","updated_at":"2024-05-07T17:29:27.476Z","dependencies_parsed_at":"2023-01-14T15:00:23.937Z","dependency_job_id":"a03b44b4-594e-4253-b05c-7c5fda381d39","html_url":"https://github.com/CondeNast/xml-to-react","commit_stats":{"total_commits":86,"total_committers":9,"mean_commits":9.555555555555555,"dds":0.6511627906976745,"last_synced_commit":"40716448c7fd2d3f011c03581c45abf60964e489"},"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CondeNast%2Fxml-to-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CondeNast%2Fxml-to-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CondeNast%2Fxml-to-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CondeNast%2Fxml-to-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/CondeNast","download_url":"https://codeload.github.com/CondeNast/xml-to-react/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":230542288,"owners_count":18242332,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["javascript","react","xml"],"created_at":"2024-12-12T20:26:46.182Z","updated_at":"2024-12-20T06:06:44.670Z","avatar_url":"https://github.com/CondeNast.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# XML-to-React\n\nConverts an XML document into a React tree.\n\n[![license](https://img.shields.io/badge/license-Apache%202.0-blue.svg?style=flat)](LICENSE)\n[![Build Status](https://travis-ci.org/CondeNast/xml-to-react.svg?branch=master)](https://travis-ci.org/CondeNast/xml-to-react)\n[![Coverage Status](https://coveralls.io/repos/github/CondeNast/xml-to-react/badge.svg)](https://coveralls.io/github/CondeNast/xml-to-react)\n\n_Proudly built by:_\n\n\u003ca href=\"https://technology.condenast.com\"\u003e\u003cimg src=\"https://user-images.githubusercontent.com/1215971/35070721-3f136cdc-fbac-11e7-81b4-e3aa5cc70a17.png\" title=\"Conde Nast Technology\" width=350/\u003e\u003c/a\u003e\n\n## Prerequisites\n\n This library may only be used in projects using React version 0.13.x or greater.\n\n## Installation\n\n```sh\nnpm install --save @condenast/xml-to-react\n```\n\nThis assumes you are using [npm](https://www.npmjs.com/) as your package manager.\n\n## Usage\n\n```js\nimport XMLToReact from '@condenast/xml-to-react';\n\nconst xmlToReact = new XMLToReact({/* converters */});\nconst reactTree = xmlToReact.convert(/* XML string */);\n```\n\n### Simple Example\n\nConvert XML nodes into DOM elements with any provided attributes\n\n```js\nimport ReactDOM from 'react-dom';\nimport XMLToReact from '@condenast/xml-to-react';\nimport MyListItem from './MyListItem';\n\nconst xmlToReact = new XMLToReact({\n  Example: (attrs) =\u003e ({ type: 'ul', props: attrs }),\n  Item: (attrs) =\u003e ({ type: MyListItem, props: attrs })\n});\n\nconst reactTree = xmlToReact.convert(`\n  \u003cExample name=\"simple\"\u003e\n    \u003cItem i=\"1\"\u003eone\u003c/Item\u003e\n    \u003cItem\u003etwo\u003c/Item\u003e\n    \u003cItem\u003ethree\u003c/Item\u003e\n  \u003c/Example\u003e\n`);\n\nReactDOM.render('app-container', reactTree);\n```\n\n```jsx\nexport default function MyListItem({ children, i }) {\n  return \u003cli data-i={i}\u003e{children}\u003c/li\u003e;\n}\n```\n\nThis example would render the following:\n\n```html\n\u003cdiv id=\"app-container\"\u003e\n  \u003cul name=\"simple\"\u003e\n    \u003cli data-i=\"1\"\u003eone\u003c/li\u003e\n    \u003cli\u003etwo\u003c/li\u003e\n    \u003cli\u003ethree\u003c/li\u003e\n  \u003c/ul\u003e\n\u003c/div\u003e\n```\n\n### Converters\n\nConverters 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`](https://reactjs.org/docs/react-api.html#createelement).\n\n- `type` - required tagName, React component, or React fragment\n- `props` - (optional) props object\n\n#### Example\n\n```js\nfunction myConverter(attributes) {\n  return {\n    type: 'div',\n    props: {\n      className: 'test'\n    }\n  }\n}\n```\n\n### `XMLToReact` constructor\n\nThe `XMLToReact` class is instantiated with a map of converters.\n\n```js\n{\n  nodeName: converterFunction\n}\n```\n\n### `convert( xml, data )`\n\n- `xml` `{string}` - xml node or document\n- `data` `{Object}` - (optional) any data to be passed to all converters\n\n## Prior Art\n\n* [jsonmltoreact](https://github.com/diffcunha/jsonmltoreact) demonstrated this technique using JsonML, and serves as motivation for this project.\n\n## Thanks\n\n* [xmldom](https://github.com/jindw/xmldom) for providing a solid XML parser.\n* [Rollup](https://github.com/rollup/rollup) for simple and quick module bundling.\n* [React](https://github.com/facebook/react) for the innovation.\n\n## Contributors\n\nSee the list of [contributors](https://github.com/CondeNast/xml-to-react/contributors) who participated in writing this library.\n## Maintainers\n\n * Daniel Taveras (@taveras)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcondenast%2Fxml-to-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcondenast%2Fxml-to-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcondenast%2Fxml-to-react/lists"}