react-from-dom

Convert HTML/XML source code or a DOM node to a React element.
The perfect replacement for React's dangerouslySetInnerHTML

Setup

Install it

1npm install react-from-dom

Getting Started

Set a string with HTML/XML source code OR a DOM Node, which will be used to create React elements recursively.

1import React from 'react';
2import convert from 'react-from-dom';
3
4const panel = convert(`
5<div class="panel">
6  <div class="panel-header">
7    <h2>Title</h2>
8  </div>
9  <div class="panel-content">
10    <ul>
11      <li>line 1</li>
12      <li>line 2</li>
13    </ul>
14  </div>
15  <div class="panel-footer">
16    Footer
17  </div>
18</div>
19`);
20
21const audio = document.createElement('audio');
22audio.setAttribute('controls', 'true');
23audio.setAttribute(
24  'src',
25  'https://interactive-examples.mdn.mozilla.net/media/examples/t-rex-roar.mp3',
26);
27const audioContent = document.createTextNode('Your browser does not support the audio element.');
28audio.appendChild(audioContent);
29
30const audioElement = convert(audio);
31
32const App = () => (
33  <div>
34    {panel}
35    {audioElement}
36  </div>
37);

API

The function accepts two parameters:

input string|Node - required
An HTML/XML source code string or a DOM node.

options Options

• actions Action[]
  An array of actions to modify the nodes before converting them to ReactNodes.
  Read about them below.
• allowWhiteSpaces boolean ▶︎ false
  Don't remove white spaces in the output.
• includeAllNodes boolean ▶︎ false
  Parse all nodes instead of just a single parent node.
  This will return a ReactNode array (or a NodeList if nodeOnly is true)
• Index number ▶︎ 0
  The index to start the React key identification.
• level number ▶︎ 0
  The level to start the React key identification.
• nodeOnly boolean ▶︎ false
  Return the node (or NodeList) without converting it to a ReactNode.
  Only used for string inputs.
• randomKey boolean ▶︎ false
  Add a random key to the root element.
• selector string ▶︎ **body > ***
  The selector to use in the document.querySelector method.
  Only used for string inputs.
• type DOMParserSupportedType ▶︎ text/html
  The mimeType to use in the DOMParser's parseFromString.
  Only used for string inputs.

Actions

You can mutate/update a Node before the conversion or replace it with a ReactNode.

1{
2  // If this returns true, the two following functions are called if they are defined
3  condition: (node: Node, key: string, level: number) => boolean;
4
5  // Use this to update or replace the node
6  // e.g. for removing or adding attributes, changing the node type
7  pre?: (node: Node, key: string, level: number) => Node;
8
9  // Use this to inject a component or remove the node
10  // It must return something that can be rendered by React
11  post?: (node: Node, key: string, level: number) => React.ReactNode;
12}

Examples

Add a class to all elements that match.

1{
2  condition: node => node.nodeName.toLowerCase() === 'div',
3  pre: node => {
4    node.className += ' a-class-added';
5    return node;
6  },
7}

Remove all elements with a specific class.

1{
2  condition: node => node.className.indexOf('delete-me') >= 0,
3  post: () => null,
4}

Return a react component for some node types.

1{
2  condition: node => node.nodeName.toLowerCase() === 'pre',
3  post: (node, key) => (
4    <ReactMarkdown key={key} source={node.textContent} />
5  ),
6},

Transform one node into another and preserve the child nodes.

1{
2  condition: node => node.nodeName.toLowerCase() === 'ul',
3  pre: (node) => {
4    const ol = document.createElement('ol');
5    
6    [...node.childNodes].forEach(child => {
7      ol.appendChild(child);
8    });
9    
10    return ol;
11  }
12}

Browser Support

If you need to support legacy browsers, you'll need to include a polyfiil for Number.isNaN in your app.
Take a look at react-app-polyfill or polyfill.io.

Credits

This is a fork from the dom-to-react package. Thanks! ❤️

License

MIT