Skip to content

Commit 9d7e259

Browse files
Create DOM to React parser
The DOM to React parser converts the DOM nodes object returned by htmlparser2's parseDOM method to React elements. The parser will return either a single React element or an array of React elements. Add `react` to devDependencies and peerDependencies.
1 parent 457f258 commit 9d7e259

File tree

2 files changed

+60
-1
lines changed

2 files changed

+60
-1
lines changed

lib/dom-to-react.js

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
'use strict';
2+
3+
/**
4+
* Module dependencies.
5+
*/
6+
var React = require('react');
7+
8+
/**
9+
* Convert DOM nodes to React elements.
10+
*
11+
* @param {Array} nodes - The DOM nodes.
12+
* @return {ReactElement|Array}
13+
*/
14+
function domToReact(nodes) {
15+
var result = [];
16+
var node;
17+
var children;
18+
19+
for (var i = 0, len = nodes.length; i < len; i++) {
20+
node = nodes[i];
21+
22+
if (node.type === 'text') {
23+
result.push(node.data);
24+
continue;
25+
}
26+
27+
children = null;
28+
29+
if (node.type === 'tag') {
30+
if (node.children) {
31+
// continue recursion of creating React elements
32+
children = domToReact(node.children);
33+
}
34+
35+
result.push(
36+
React.createElement(
37+
node.name,
38+
node.attribs,
39+
children
40+
)
41+
);
42+
}
43+
}
44+
45+
if (result.length === 1) {
46+
return result[0];
47+
} else {
48+
return result;
49+
}
50+
}
51+
52+
/**
53+
* Export DOM to React parser.
54+
*/
55+
module.exports = domToReact;

package.json

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,11 @@
1818
"htmlparser2": "^3.9.1"
1919
},
2020
"devDependencies": {
21-
"mocha": "^3.0.2"
21+
"mocha": "^3.0.2",
22+
"react": "^15.3.0"
23+
},
24+
"peerDependencies": {
25+
"react": "^0.13 || ^15.0"
2226
},
2327
"license": "MIT"
2428
}

0 commit comments

Comments
 (0)