react-native-htmlview - npm Package Compare versions

Comparing version 0.7.0 to 0.7.1

.eslintrc.js

@@ -28,2 +28,3 @@
     "no-shadow": 2,
+    "no-var": 2,
     // style
@@ -30,0 +31,0 @@ "semi": [2, 'always'],

htmlToElement.js

@@ -1,16 +0,32 @@
-var React = require('react');
-var ReactNative = require('react-native');
-var htmlparser = require('htmlparser2-without-node-native');
-var entities = require('entities');
-
-var {
+import React from 'react';
+import {
   Text,
-} = ReactNative;
+} from 'react-native';
+import htmlparser from 'htmlparser2-without-node-native';
+import entities from 'entities';
 
-var Img = require('./Img');
+import AutoSizedImage from './AutoSizedImage';
 
-var LINE_BREAK = '\n';
-var BULLET = '\u2022 ';
+const LINE_BREAK = '\n';
+const BULLET = '\u2022 ';
 
-function htmlToElement(rawHtml, opts, done) {
+const Img = props => {
+  const width = Number(props.attribs['width']) || Number(props.attribs['data-width']) || 0;
+  const height = Number(props.attribs['height']) || Number(props.attribs['data-height']) || 0;
+
+  const imgStyle = {
+    width,
+    height,
+  };
+  const source = {
+    uri: props.attribs.src,
+    width,
+    height,
+  };
+  return (
+    <AutoSizedImage source={source} style={imgStyle} />
+  );
+};
+
+export default function htmlToElement(rawHtml, opts, done) {
   function domToElement(dom, parent) {
@@ -21,7 +37,6 @@ if (!dom) return null;
       if (opts.customRenderer) {
-        var rendered = opts.customRenderer(node, index, list);
+        const rendered = opts.customRenderer(node, index, list, parent);
         if (rendered || rendered === null) return rendered;
       }
 
-
       if (node.type == 'text') {
@@ -37,20 +52,8 @@ return (
         if (node.name == 'img') {
-          var imgWidth = Number(node.attribs['width']) || Number(node.attribs['data-width']) || 0;
-          var imgHeight = Number(node.attribs['height']) || Number(node.attribs['data-height']) || 0;
-
-          var imgStyle = {
-            width: imgWidth,
-            height: imgHeight,
-          };
-          var source = {
-            uri: node.attribs.src,
-            width: imgWidth,
-            height: imgHeight,
-          };
           return (
-            <Img key={index} source={source} style={imgStyle} />
+            <Img key={index} attribs={node.attribs} />
           );
         }
 
-        var linkPressHandler = null;
+        let linkPressHandler = null;
         if (node.name == 'a' && node.attribs && node.attribs.href) {
@@ -74,7 +77,7 @@ linkPressHandler = () => opts.linkHandler(entities.decodeHTML(node.attribs.href));
 
-  var handler = new htmlparser.DomHandler(function(err, dom) {
+  const handler = new htmlparser.DomHandler(function(err, dom) {
     if (err) done(err);
     done(null, domToElement(dom));
   });
-  var parser = new htmlparser.Parser(handler);
+  const parser = new htmlparser.Parser(handler);
   parser.write(rawHtml);
@@ -84,2 +87,1 @@ parser.done();
 
-module.exports = htmlToElement;

HTMLView.js

@@ -6,3 +6,3 @@ import React, {Component, PropTypes} from 'react';
   StyleSheet,
-  Text,
+  View,
 } from 'react-native';
@@ -25,2 +25,8 @@
   },
+  h1: {fontWeight: '500', fontSize: 36},
+  h2: {fontWeight: '500', fontSize: 30},
+  h3: {fontWeight: '500', fontSize: 24},
+  h4: {fontWeight: '500', fontSize: 18},
+  h5: {fontWeight: '500', fontSize: 14},
+  h6: {fontWeight: '500', fontSize: 12},
 });
@@ -75,5 +81,5 @@
     if (this.state.element) {
-      return <Text children={this.state.element} />;
+      return <View children={this.state.element} />;
     }
-    return <Text />;
+    return <View />;
   }
@@ -88,2 +94,4 @@ }
   renderNode: PropTypes.func,
+  blockComponent: PropTypes.func,
+  inlineComponent: PropTypes.func,
 };
@@ -90,0 +98,0 @@

index.js

@@ -1,1 +0,3 @@
-module.exports = require('./HTMLView');
+import HTMLView from './HTMLView';
+
+export default HTMLView;

package.json

 {
   "name": "react-native-htmlview",
-  "version": "0.7.0",
+  "version": "0.7.1",
   "description": "A component which renders HTML content as native views",
@@ -8,4 +8,5 @@ "main": "index.js",
     "lint": "eslint .",
-    "test": "yarn run lint-format && yarn run lint && yarn run jest",
-    "lint-format": "./format.sh --list-different; if [ $? != 0 ]; then echo \"CODE FORMATTING: please run 'yarn run format' and commit the changes\"; exit 1; fi",
+    "lint-fix": "eslint . --fix",
+    "test": "yarn run format-lint && yarn run lint && yarn run jest",
+    "format-lint": "./format.sh --list-different; if [ $? != 0 ]; then echo \"CODE FORMATTING: please run 'yarn run format' and commit the changes\"; exit 1; fi",
     "format": "./format.sh --write && eslint . --fix",
@@ -12,0 +13,0 @@ "jest": "jest"

README.md

@@ -69,2 +69,37 @@ # React Native HTMLView
 
+### custom element rendering
+
+You can implement the `renderNode` prop to add support for unsupported element
+types,  or override the rendering for supported types.
+
+For example, here is how you might implement the `<iframe>` element:
+
+```js
+function renderNode(node, index, siblings, parent) {
+  if (node.name == 'iframe') {
+    const a = node.attribs;
+    const iframeHtml = `<iframe src="${a.src}"></iframe>`;
+    return (
+      <View key={index} style={{width: Number(a.width), height: Number(a.height)}}>
+        <WebView source={{html: iframeHtml}} />
+      </View>
+    );
+  }
+}
+
+const htmlContent = `
+  <div>
+    <iframe src="http://info.cern.ch/" width="360" height="300" />
+  </div>
+`;
+
+class App extends React.Component {
+  render() {
+    return (
+      <HTMLView value={htmlContent} renderNode={renderNode} />
+    );
+  }
+}
+```
+
 ### screenshot
@@ -71,0 +106,0 @@

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

15043

increased by27.17%

Number of package files

12

increased by9.09%

Lines of code

317

increased by25.3%

Number of lines in readme file

121

increased by40.7%

Number of medium supply chain risk alerts

0

decreased by-100%

No dependency changes