html-react-parser - npm Package Compare versions

Comparing version 0.0.4 to 0.0.5

lib/dom-to-react.js

@@ -31,5 +31,10 @@ 'use strict';
         if (isReplacePresent) {
-            replacement = options.replace(node, i); // i = key
+            replacement = options.replace(node);
 
             if (React.isValidElement(replacement)) {
+                // specify a "key" prop if element has siblings
+                // https://fb.me/react-warning-keys
+                if (len > 1) {
+                    replacement = React.cloneElement(replacement, { key: i });
+                }
                 result.push(replacement);
@@ -49,9 +54,12 @@ continue;
 
-        // node type for script is "script" not "tag"
-        if (node.name === 'script' && node.children[0]) {
-            // prevent text in script tag from being escaped
+        // node type for <script> is "script"
+        // node type for <style> is "style"
+        if (node.type === 'script' || node.type === 'style') {
+            // prevent text in <script> or <style> from being escaped
             // https://facebook.github.io/react/tips/dangerously-set-inner-html.html
-            props.dangerouslySetInnerHTML = {
-                __html: node.children[0].data
-            };
+            if (node.children[0]) {
+                props.dangerouslySetInnerHTML = {
+                    __html: node.children[0].data
+                };
+            }
 
@@ -58,0 +66,0 @@ } else if (node.type === 'tag') {

package.json

 {
   "name": "html-react-parser",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "description": "An HTML to React parser.",
@@ -22,6 +22,6 @@ "author": "Mark <[e-mail]>",
     "html",
+    "dom",
     "react",
     "parser",
-    "html react parser",
-    "html to react"
+    "converter"
   ],
@@ -28,0 +28,0 @@ "dependencies": {

README.md

@@ -71,13 +71,12 @@ # html-react-parser
 
-#### replace(domNode, key)
+#### replace(domNode)
 
 The `replace` method allows you to swap an element with your own React element.
 
-The method has 2 parameters:
+The method has 1 parameter:
 1. `domNode`: An object which shares the same schema as the output from [htmlparser2.parseDOM](https://github.com/fb55/domhandler#example).
-2. `key`: A number to keep track of the element. You should set it as the ["key" prop](https://fb.me/react-warning-keys) in case your element has siblings.
 
 ```js
 Parser('<p id="replace">text</p>', {
-    replace: function(domNode, key) {
+    replace: function(domNode) {
         console.log(domNode);
@@ -92,4 +91,2 @@ // {  type: 'tag',
 
-        console.log(key); // 0
-
         return;
@@ -111,10 +108,9 @@ // element is not replaced because
 var reactElement = Parser(html, {
-    replace: function(domNode, key) {
+    replace: function(domNode) {
         if (domNode.attribs && domNode.attribs.id === 'main') {
             return React.createElement('span', {
-                key: key,
                 style: { fontSize: '42px' } },
             'replaced!');
             // equivalent jsx syntax:
-            // return <span key={key} style={{ fontSize: '42px' }}>replaced!</span>;
+            // return <span style={{ fontSize: '42px' }}>replaced!</span>;
         }
@@ -121,0 +117,0 @@ }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

21748

increased by0.39%

Lines of code

479

increased by1.7%

Worsened metrics

Number of lines in readme file

134

decreased by-2.9%

No dependency changes