https://github.com/wvbe/xml-renderer

An npm/browser module for easy matching XML and XPath to React Components and other stuff
https://github.com/wvbe/xml-renderer

dom react render xml xml-node xml-renderer xpath xslt

Last synced: about 2 months ago
JSON representation

An npm/browser module for easy matching XML and XPath to React Components and other stuff

• Host: GitHub
• URL: https://github.com/wvbe/xml-renderer
• Owner: wvbe
• License: mit
• Created: 2017-05-19T15:15:33.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2023-03-14T14:19:35.000Z (almost 2 years ago)
• Last Synced: 2024-11-19T13:03:26.555Z (2 months ago)
• Topics: dom, react, render, xml, xml-node, xml-renderer, xpath, xslt
• Language: TypeScript
• Homepage: https://www.npmjs.com/package/xml-renderer
• Size: 2.72 MB
• Stars: 17
• Watchers: 3
• Forks: 2
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# xml-renderer

Combines XML and XPath with _your_ components and stylesheets to render whatever in React or elsewhere. Can be used for

front- or back-end rendering.

## Docs & demo

Docs have been temporarily removed. As an alternative, check out;

-   Unit test code in [`src/`](src)

-   [Demonstration site with several documents](https://wvbe.github.io/xml-renderer)

-   [Code to the demonstration site](https://github.com/wvbe/xml-renderer-demo)

## Installation

@TODO Use in Deno

@TODO Use in Node

## Example in NodeJS

```js

import React from 'react';

import { parseXmlDocument } from 'slimdom';

// Take the default export of `xml-renderer`

import { ReactRenderer } from 'xml-renderer';

// Instantiate a new object to contain rendering rules

const experience = new ReactRenderer(React.createElement);

// For text nodes you _probably_ just want to show the text content

experience.add('self::text()', ({ node }) => node.nodeValue);

// For some nodes, including the document node, you _probably_ just want to render the children

experience.add('self::node()', ({ traverse }) => traverse());

// For other nodes you may want to add a template

experience.add('self::paragraph', ({ traverse }) => 
{traverse()}
);


// For some situations you may want to specify a more specific test

experience.add('self::paragraph[not(preceding-sibling::*)]', ({ traverse }) => (

	


		{traverse()}

	

));


// For some situations you may want to traverse into specific children, or add some elements of your own

experience.add('self::webpage', ({ traverse }) => (

	


		
My first page

		{traverse('./paragraph')}

	

));


// ReactRenderer#render returns React elements, so you can use them in React like any other JS value

export default function MyXmlDocument({ xmlString }) {

	return 
{xp.render(React.createElement, parseXmlDocument(xmlString))}
;

}

```


## Example in Deno

```ts

import { ReactRenderer} from 'https://deno.land/x/xml_renderer/mod.ts';

// …

```