{"id":21766944,"url":"https://github.com/wvbe/xml-renderer","last_synced_at":"2025-04-13T15:13:03.554Z","repository":{"id":41516217,"uuid":"91818633","full_name":"wvbe/xml-renderer","owner":"wvbe","description":"An npm/browser module for easy matching XML and XPath to React Components and other stuff","archived":false,"fork":false,"pushed_at":"2023-03-14T14:19:35.000Z","size":2857,"stargazers_count":18,"open_issues_count":1,"forks_count":3,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-27T06:12:11.283Z","etag":null,"topics":["dom","react","render","xml","xml-node","xml-renderer","xpath","xslt"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/xml-renderer","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/wvbe.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-05-19T15:15:33.000Z","updated_at":"2025-02-23T07:21:33.000Z","dependencies_parsed_at":"2023-02-14T07:25:16.463Z","dependency_job_id":null,"html_url":"https://github.com/wvbe/xml-renderer","commit_stats":null,"previous_names":[],"tags_count":32,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wvbe%2Fxml-renderer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wvbe%2Fxml-renderer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wvbe%2Fxml-renderer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wvbe%2Fxml-renderer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/wvbe","download_url":"https://codeload.github.com/wvbe/xml-renderer/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248441376,"owners_count":21103983,"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":["dom","react","render","xml","xml-node","xml-renderer","xpath","xslt"],"created_at":"2024-11-26T13:20:59.370Z","updated_at":"2025-04-13T15:13:03.528Z","avatar_url":"https://github.com/wvbe.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# xml-renderer\n\nCombines XML and XPath with _your_ components and stylesheets to render whatever in React or elsewhere. Can be used for\nfront- or back-end rendering.\n\n## Docs \u0026 demo\n\nDocs have been temporarily removed. As an alternative, check out;\n\n-   Unit test code in [`src/`](src)\n-   [Demonstration site with several documents](https://wvbe.github.io/xml-renderer)\n-   [Code to the demonstration site](https://github.com/wvbe/xml-renderer-demo)\n\n## Installation\n\n@TODO Use in Deno\n@TODO Use in Node\n\n## Example in NodeJS\n\n```js\nimport React from 'react';\nimport { parseXmlDocument } from 'slimdom';\n\n// Take the default export of `xml-renderer`\nimport { ReactRenderer } from 'xml-renderer';\n\n// Instantiate a new object to contain rendering rules\nconst experience = new ReactRenderer(React.createElement);\n\n// For text nodes you _probably_ just want to show the text content\nexperience.add('self::text()', ({ node }) =\u003e node.nodeValue);\n\n// For some nodes, including the document node, you _probably_ just want to render the children\nexperience.add('self::node()', ({ traverse }) =\u003e traverse());\n\n// For other nodes you may want to add a template\nexperience.add('self::paragraph', ({ traverse }) =\u003e \u003cp\u003e{traverse()}\u003c/p\u003e);\n\n// For some situations you may want to specify a more specific test\nexperience.add('self::paragraph[not(preceding-sibling::*)]', ({ traverse }) =\u003e (\n\t\u003cp\u003e\n\t\t\u003cb\u003e{traverse()}\u003c/b\u003e\n\t\u003c/p\u003e\n));\n\n// For some situations you may want to traverse into specific children, or add some elements of your own\nexperience.add('self::webpage', ({ traverse }) =\u003e (\n\t\u003cdiv\u003e\n\t\t\u003ch1\u003eMy first page\u003c/h1\u003e\n\t\t{traverse('./paragraph')}\n\t\u003c/div\u003e\n));\n\n// ReactRenderer#render returns React elements, so you can use them in React like any other JS value\nexport default function MyXmlDocument({ xmlString }) {\n\treturn \u003cdiv className=\"doc-or-whatever\"\u003e{xp.render(React.createElement, parseXmlDocument(xmlString))}\u003c/div\u003e;\n}\n```\n\n\n## Example in Deno\n```ts\nimport { ReactRenderer} from 'https://deno.land/x/xml_renderer/mod.ts';\n// …\n```","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwvbe%2Fxml-renderer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwvbe%2Fxml-renderer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwvbe%2Fxml-renderer/lists"}