https://github.com/smikhalevski/react-dom-renderer
⚛️ Renders XML/HTML/SVG source as React nodes using a customizable element renderer.
https://github.com/smikhalevski/react-dom-renderer
html react render renderer svg xml
Last synced: 2 months ago
JSON representation
⚛️ Renders XML/HTML/SVG source as React nodes using a customizable element renderer.
- Host: GitHub
- URL: https://github.com/smikhalevski/react-dom-renderer
- Owner: smikhalevski
- License: mit
- Created: 2021-12-21T17:41:55.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2021-12-22T19:44:43.000Z (over 4 years ago)
- Last Synced: 2025-08-18T08:59:31.454Z (11 months ago)
- Topics: html, react, render, renderer, svg, xml
- Language: TypeScript
- Homepage:
- Size: 340 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.txt
Awesome Lists containing this project
README
# react-dom-renderer [](https://github.com/smikhalevski/react-dom-renderer/actions/workflows/master.yml)
Renders XML/HTML/SVG source as React nodes using customizable element renderer.
```shell
npm install --save-prod react-dom-renderer
```
This library is build on top of [TagSoup 🍜](https://github.com/smikhalevski/tag-soup), the fastest and the tiniest
XML/HTML parser.
The size of this package is [just 8 kB gzipped](https://bundlephobia.com/package/react-dom-renderer), including all
dependencies.
# Usage
By default, markup is treated as HTML.
```tsx
import {DomRenderer} from 'react-dom-renderer';
const MyComponent = () => (
Hello, world'}/>
);
// → <>Hello, world>
```
You can specify the element renderer and introduce your custom elements.
```tsx
import {useCallback} from 'react';
import {ElementRenderer, DomRenderer} from 'react-dom-renderer';
const MyComponent = () => {
// Prevent excessive parsings by useCallback
const elementRenderer = useCallback((tagName) => {
// Tag name is lower cased because HTML parser is used
if (tagName === 'le:bear') {
return {'Bonjour'};
}
if (tagName === 'forest') {
// Do something here
}
// All other tags are ignored
});
return (
'}
elementRenderer={elementRenderer}
/>
);
};
// → Bonjour
```
Provide the DOM pre-processor to alter the node tree before rendering.
In this example we are going to unwrap root `p` element if it's the only one.
```tsx
import {useCallback} from 'react';
import {DomPreprocessor, DomRenderer} from 'react-dom-renderer';
import {NodeType} from 'tag-soup';
const MyComponent = () => {
// Prevent excessive parsings by useCallback
const domPreprocessor = useCallback((nodes) => {
const node = nodes[0];
if (nodes.length === 1 && node.nodeType === NodeType.ELEMENT && node.tagName === 'p') {
return node.children;
}
// If undefined is returned then original nodes are rendered
// return nodes;
});
return (
No paragraphs'}
domPreprocessor={domPreprocessor}
/>
);
};
// → <>No paragraphs>
```
Use the customized DOM parser.
In this example we are going to initialize a parser that recognizes custom entities.
Have a look at [TagSoup 🍜](https://github.com/smikhalevski/tag-soup)
and [speedy-entities](https://github.com/smikhalevski/speedy-entities) for more details on configuration.
```tsx
import {DomParserContext, ElementRenderer, DomRenderer} from 'react-dom-renderer';
import {createEntityDecoder, createEntityManager} from 'speedy-entities';
import {createHtmlDomParser, domHandler} from 'tag-soup';
const entityManager = createEntityManager();
entityManager.set('wtfisthis', 'This is Sparta');
const parser = createHtmlDomParser(domHandler, {
decodeText: createEntityDecoder(entityManager),
});
const MyComponent = () => (
);
// → <>This is Sparta>
```