Merge pull request #18 from remarkablemark/remove-replace-key

Remove `key` parameter from `replace` and use `React.cloneElement` instead

Author: remarkablemark

.eslintrc

@@ -12,7 +12,7 @@
         "indent": [
             "error",
             4,
-            { SwitchCase: 1 }
+            { "SwitchCase": 1 }
         ],
         "linebreak-style": [
             "error",
@@ -26,8 +26,11 @@
             "error",
             "always"
         ],
+        "no-unused-vars": [
+            "error",
+            { "vars": "all", "args": "none" }
+        ],
         "strict": 2,
-        "no-unused-vars": 2,
         "no-cond-assign": 2,
         "camelcase": 1
     }

README.md

@@ -68,17 +68,16 @@ ReactDOM.render(
 
 ### Options
 
-#### 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);
         // {  type: 'tag',
         //    name: 'p',
@@ -88,8 +87,6 @@ Parser('<p id="replace">text</p>', {
         //    prev: null,
         //    parent: null }
 
-        console.log(key); // 0
-
         return;
         // element is not replaced because
         // a valid React element is not returned
@@ -106,14 +103,13 @@ var React = require('react');
 var html = '<div><p id="main">replace me</p></div>';
 
 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>;
         }
     }
 });

lib/dom-to-react.js

@@ -28,9 +28,14 @@ function domToReact(nodes, options) {
 
         // replace with custom React element (if applicable)
         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);
                 continue;
             }

test/html-to-react.js

@@ -77,9 +77,9 @@ describe('html-to-react', function() {
             it('overrides the element if replace is valid', function() {
                 var html = data.html.complex;
                 var reactElement = Parser(html, {
-                    replace: function(node, key) {
+                    replace: function(node) {
                         if (node.name === 'title') {
-                            return React.createElement('title', { key: key }, 'Replaced Title');
+                            return React.createElement('title', {}, 'Replaced Title');
                         }
                     }
                 });