Merge pull request #81 from archriss/dev

v3.7.0

Demo/package.json

@@ -7,15 +7,15 @@
     "test": "jest"
   },
   "dependencies": {
-    "react": "16.0.0-alpha.12",
-    "react-native": "0.48.3",
-    "react-native-render-html": "3.6.0"
+    "react": "16.2.0",
+    "react-native": "0.52.0",
+    "react-native-render-html": "3.7.0"
   },
   "devDependencies": {
-    "babel-jest": "21.0.2",
+    "babel-jest": "22.0.6",
     "babel-preset-react-native": "4.0.0",
-    "jest": "21.1.0",
-    "react-test-renderer": "16.0.0-alpha.12"
+    "jest": "22.0.6",
+    "react-test-renderer": "16.2.0"
   },
   "jest": {
     "preset": "react-native"

README.md

@@ -24,6 +24,7 @@ An iOS/Android pure javascript react-native component that renders your HTML int
         - [alterData](#alterdata)
         - [alterChildren](#alterchildren)
         - [alterNode](#alternode)
+        - [onParsed](#onparsed)
     - [Ignoring HTML content](#ignoring-html-content)
     - [Useful functions](#useful-functions)
 
@@ -67,7 +68,7 @@ Prop | Description | Type | Required/Default
 `imagesMaxWidth` | Resize your images to this maximum width, see [images](#images) | `number` | Optional
 `imagesInitialDimensions` | Default width and height to display while image's dimensions are being retrieved, see [images](#images) | `{ width: 100, height: 100 }` | Optional
 `onLinkPress` | Fired with the event and the href as its arguments when tapping a link | `function` | Optional
-`onParsed` | Fired when your HTML content has been parsed, 1st arg is `dom` from htmlparser2, 2nd is `RNElements` from this module | `function` | Optional
+`onParsed` | Fired when your HTML content has been parsed. Also useful to tweak your rendering, see [onParsed](#onparsed) | `function` | Optional
 `tagsStyles` | Provide your styles for specific HTML tags, see [styling](#styling) | `object` | Optional
 `classesStyles` | Provide your styles for specific HTML classes, see [styling](#styling) | `object` | Optional
 `listsPrefixesRenderers` | Your custom renderers from `ul` and `ol` bullets, see [lists prefixes](#lists-prefixes) | `object` | Optional
@@ -260,6 +261,29 @@ alterNode: (node) => {
 }
 ```
 
+### onParsed
+
+`onParsed` is a callback and lets you know when your HTML has been parsed. Its first argument is the `dom` array from htmlparser2, its second is `RNElements` which is the result of the parsing of this module.
+
+If you want to tweak the parsed values, you can change `RNElements` and return it. For instance, you could insert one of your custom component although it was not in your HTML content, like this :
+
+```javascript
+onHTMLParsed = (dom, RNElements) => {
+    // Find the index of the first paragraph
+    const ad = {
+        wrapper: 'View',
+        tagName: 'mycustomblock',
+        attribs: {},
+        parent: false,
+        parentTag: false,
+        nodeIndex: 4
+    };
+    // Insert the component
+    RNElements.splice(4, 0, ad);
+    return RNElements;
+}
+```
+
 ## Ignoring HTML content
 
 You can't expect native components to be able to render *everything* you can find in your browser. And you might not entirely trust your contributors, so here are 3 props allowing you to prevent disasters without sanitizing your HTML on the server-side (that doesn't mean you shouldn't !).

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-render-html",
-  "version": "3.6.0",
+  "version": "3.7.0",
   "author": "Archriss",
   "license": "BSD-2-Clause",
   "repository": "https://github.com/archriss/react-native-render-html",

src/HTML.js

@@ -117,8 +117,13 @@ export default class HTML extends PureComponent {
         const { decodeEntities, debug, onParsed } = this.props;
         const parser = new htmlparser2.Parser(
             new htmlparser2.DomHandler((_err, dom) => {
-                const RNElements = this.mapDOMNodesTORNElements(dom);
-                onParsed && onParsed(dom, RNElements);
+                let RNElements = this.mapDOMNodesTORNElements(dom);
+                if (onParsed) {
+                    const alteredRNElements = onParsed(dom, RNElements);
+                    if (alteredRNElements) {
+                        RNElements = alteredRNElements;
+                    }
+                }
                 this.setState({ RNNodes: this.renderRNElements(RNElements) });
                 if (debug) {
                     console.log('DOMNodes from htmlparser2', dom);
@@ -280,6 +285,7 @@ export default class HTML extends PureComponent {
                     data: data.replace(/(\r\n|\n|\r)/gm, ''), // remove linebreaks
                     attribs: attribs || {},
                     parent,
+                    parentTag: parent && parent.name,
                     tagName: name || 'rawtext'
                 };
             }