html-react-parser - npm Package Compare versions

Comparing version 0.0.3 to 0.0.4

lib/dom-to-react.js

@@ -31,3 +31,3 @@ 'use strict';
         if (isReplacePresent) {
-            replacement = options.replace(node);
+            replacement = options.replace(node, i); // i = key
 
@@ -63,4 +63,4 @@ if (React.isValidElement(replacement)) {
 
-            } else if (node.children) {
-                // continue recursion of creating React elements
+            // continue recursion of creating React elements (if applicable)
+            } else if (node.children && node.children.length) {
                 children = domToReact(node.children, options);
@@ -74,3 +74,3 @@ }
 
-        // specify a `key` prop if returning an array
+        // specify a "key" prop if element has siblings
         // https://fb.me/react-warning-keys
@@ -77,0 +77,0 @@ if (len > 1) {

package.json

 {
   "name": "html-react-parser",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "description": "An HTML to React parser.",
@@ -9,3 +9,5 @@ "author": "Mark <[e-mail]>",
     "test": "mocha",
-    "lint": "eslint index.js \"lib/**\" \"test/**\""
+    "lint": "eslint index.js \"lib/**\" \"test/**\"",
+    "cover": "istanbul cover _mocha -- -R spec \"test/**/*\"",
+    "coveralls": "cat coverage/lcov.info | coveralls"
   },
@@ -31,3 +33,5 @@ "repository": {
   "devDependencies": {
+    "coveralls": "^2.11.12",
     "eslint": "^3.3.1",
+    "istanbul": "^0.4.5",
     "jsdomify": "^2.1.0",
@@ -34,0 +38,0 @@ "mocha": "^3.0.2",

README.md

 # html-react-parser
 
+[![NPM](https://nodei.co/npm/html-react-parser.png)](https://nodei.co/npm/html-react-parser/)
+
+[![NPM version](https://img.shields.io/npm/v/html-react-parser.svg)](https://www.npmjs.com/package/html-react-parser)
+[![Build Status](https://travis-ci.org/remarkablemark/html-react-parser.svg?branch=master)](https://travis-ci.org/remarkablemark/html-react-parser)
+[![Coverage Status](https://coveralls.io/repos/github/remarkablemark/html-react-parser/badge.svg?branch=master)](https://coveralls.io/github/remarkablemark/html-react-parser?branch=master)
+[![Dependency status](https://david-dm.org/remarkablemark/html-react-parser.svg)](https://david-dm.org/remarkablemark/html-react-parser)
+
 An HTML to React parser.
@@ -18,3 +25,3 @@
 );
-ReactDOM.render(reactElement, document.getElementById('node'));
+require('react-dom').render(reactElement, document.getElementById('root'));
 ```
@@ -53,3 +60,3 @@
     Parser('<ul><li>inside</li></ul>'),
-    document.getElementedById('root')
+    document.getElementById('root')
 );
@@ -66,9 +73,34 @@
 
-#### replace(domNode)
+#### replace(domNode, key)
 
-`replace` allows you to swap an element with your own React element.
+The `replace` method allows you to swap an element with your own React element.
 
-The output of `domNode` is the same as the output from [htmlparser2.parseDOM](https://github.com/fb55/domhandler#example).
+The method has 2 parameters:
+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) {
+        console.log(domNode);
+        // {  type: 'tag',
+        //    name: 'p',
+        //    attribs: { id: 'replace' },
+        //    children: [],
+        //    next: null,
+        //    prev: null,
+        //    parent: null }
+
+        console.log(key); // 0
+
+        return;
+        // element is not replaced because
+        // a valid React element is not returned
+    }
+});
+```
+
+Working example:
+
+```js
 var Parser = require('html-react-parser');
@@ -80,14 +112,10 @@ var React = require('react');
 var reactElement = Parser(html, {
-    replace: function(domNode) {
-        // example `domNode`:
-        // {  type: 'tag',
-        //    name: 'p',
-        //    attribs: { id: 'main' },
-        //    children: [],
-        //    next: null,
-        //    prev: null,
-        //    parent: [Circular] }
+    replace: function(domNode, key) {
         if (domNode.attribs && domNode.attribs.id === 'main') {
-            // element is replaced only if a valid React element is returned
-            return React.createElement('span', { style: { fontSize: '42px' } }, 'replaced!');
+            return React.createElement('span', {
+                key: key,
+                style: { fontSize: '42px' } },
+            'replaced!');
+            // equivalent jsx syntax:
+            // return <span key={key} style={{ fontSize: '42px' }}>replaced!</span>;
         }
@@ -97,4 +125,3 @@ }
 
-var ReactDOM = require('react-dom');
-ReactDOM.render(reactElement, document.getElementById('root'));
+require('react-dom').render(reactElement, document.getElementById('root'));
 // <div><span style="font-size: 42px;">replaced!</span></div>
@@ -101,0 +128,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

21664

increased by7.3%

Number of lines in readme file

138

increased by24.32%

Worsened metrics

Dev dependency count

7

increased by40%

No dependency changes