react-native-htmlview - npm Package Compare versions

Comparing version 0.8.0 to 0.9.0

htmlToElement.js

@@ -11,2 +11,3 @@ import React from 'react';
 const LINE_BREAK = '\n';
+const PARAGRAPH_BREAK = '\n\n';
 const BULLET = '\u2022 ';
@@ -38,3 +39,3 @@
       if (opts.customRenderer) {
-        const rendered = opts.customRenderer(node, index, list, parent);
+        const rendered = opts.customRenderer(node, index, list, parent, domToElement);
         if (rendered || rendered === null) return rendered;
@@ -63,10 +64,40 @@ }
 
+        let linebreakBefore = null;
+        let linebreakAfter = null;
+        if (opts.addLineBreaks) {
+          switch (node.name) {
+          case 'pre':
+            linebreakBefore = LINE_BREAK;
+            break;
+          case 'p':
+            if (index < list.length - 1) {
+              linebreakAfter = PARAGRAPH_BREAK;
+            }
+            break;
+          case 'br':
+          case 'h1':
+          case 'h2':
+          case 'h3':
+          case 'h4':
+          case 'h5':
+            linebreakAfter = LINE_BREAK;
+            break;
+          }
+        }
+
+        let listItemPrefix = null;
+        if (node.name == 'li') {
+          if (parent.name == 'ol') {
+            listItemPrefix = `${index + 1}. `;
+          } else if (parent.name == 'ul') {
+            listItemPrefix = BULLET;
+          }
+        }
+
         return (
           <Text key={index} onPress={linkPressHandler}>
-            {node.name == 'pre' ? LINE_BREAK : null}
-            {node.name == 'li' ? BULLET : null}
+            {linebreakBefore}
+            {listItemPrefix}
             {domToElement(node.children, node)}
-            {node.name == 'br' || node.name == 'li' ? LINE_BREAK : null}
-            {node.name == 'p' && index < list.length - 1 ? LINE_BREAK + LINE_BREAK : null}
-            {node.name == 'h1' || node.name == 'h2' || node.name == 'h3' || node.name == 'h4' || node.name == 'h5' ? LINE_BREAK : null}
+            {linebreakAfter}
           </Text>
@@ -73,0 +104,0 @@ );

HTMLView.js

@@ -61,2 +61,3 @@ import React, {Component, PropTypes} from 'react';
     const opts = {
+      addLineBreaks: this.props.addLineBreaks,
       linkHandler: this.props.onLinkPress,
@@ -80,5 +81,5 @@ styles: Object.assign({}, baseStyles, this.props.stylesheet),
     if (this.state.element) {
-      return <View children={this.state.element} styles={this.props.styles} />;
+      return <View children={this.state.element} style={this.props.style} />;
     }
-    return <View styles={this.props.styles} />;
+    return <View style={this.props.style} />;
   }
@@ -88,5 +89,6 @@ }
 HtmlView.propTypes = {
+  addLineBreaks: PropTypes.bool,
   value: PropTypes.string,
   stylesheet: PropTypes.object,
-  styles: PropTypes.object,
+  style: View.propTypes.style,
   onLinkPress: PropTypes.func,
@@ -100,2 +102,3 @@ onError: PropTypes.func,
 HtmlView.defaultProps = {
+  addLineBreaks: true,
   onLinkPress: url => Linking.openURL(url),
@@ -102,0 +105,0 @@ onError: console.error.bind(console),

package.json

 {
   "name": "react-native-htmlview",
-  "version": "0.8.0",
+  "version": "0.9.0",
   "description": "A component which renders HTML content as native views",
@@ -5,0 +5,0 @@ "main": "index.js",

README.md

 # React Native HTMLView
-A component which takes HTML content and renders it as native views, with 
+A component which takes HTML content and renders it as native views, with
 customisable style and handling of links, etc.
 
-### usage
+In action (from [ReactNativeHackerNews](https://github.com/jsdf/ReactNativeHackerNews)):
 
+![React Native Hacker News Comments](http://i.imgur.com/FYOgBYc.png)
+
+## Table of contents
+- [Install](#install)
+- [Usage](#usage)
+- [Example](#example)
+- [Changelog](#changelog)
+
+### Install
+```
+npm install react-native-htmlview --save
+```
+
+### Usage
+
 props:
@@ -12,22 +27,24 @@
   Passing this prop will override how links are handled (defaults to calling `Linking.openURL(url)`)
-- `stylesheet`: a stylesheet object keyed by tag name, which will override the 
+- `stylesheet`: a stylesheet object keyed by tag name, which will override the
   styles applied to those respective tags.
-- `renderNode`: a custom function to render HTML nodes however you see fit. If 
-  the function returns `undefined` (not `null`), the default renderer will be 
-  used for that node.
+- `renderNode`: a custom function to render HTML nodes however you see fit. If
+  the function returns `undefined` (not `null`), the default renderer will be
+  used for that node. The function takes the following arguments:
+  - `node` the html node as parsed by [htmlparser2](https://github.com/fb55/htmlparser2)
+  - `index` position of the node in parent node's children
+  - `siblings` parent node's children (including current node)
+  - `parent` parent node
+  - `defaultRenderer` the default rendering implementation, so you can use the normal rendering logic for some subtree. `defaultRenderer` takes the following arguments:
+    - `node` the node to render with the default rendering logic
+    - `parent` the parent of node of `node`
 
-Note: see the [troubleshooting](#troubleshooting) section below if you're having problems with links not working.
+### Example
 
-### example
-
 ```js
-var React = require('react')
-var ReactNative = require('react-native')
-var {Text, View, ListView} = ReactNative
+import React from 'react';
+import HTMLView from 'react-native-htmlview';
 
-var HTMLView = require('react-native-htmlview')
-
-var App = React.createClass({
+class App extends React.Component {
   render() {
-    var htmlContent = '<p><a href="http://jsdf.co">&hearts; nice job!</a></p>'
+    const htmlContent = `<p><a href="http://jsdf.co">&hearts; nice job!</a></p>`;
 
@@ -39,5 +56,5 @@ return (
       />
-    )
+    );
   }
-})
+}
 
@@ -47,3 +64,3 @@ var styles = StyleSheet.create({
     fontWeight: '300',
-    color: '#FF3366', // pink links
+    color: '#FF3366', // make links coloured pink
   },
@@ -53,3 +70,5 @@ })
 
-When a link is clicked, by default `ReactNative.Linking.openURL` is called with the 
+### Custom Link Handling
+
+When a link is clicked, by default `ReactNative.Linking.openURL` is called with the
 link url. You can customise what happens when a link is clicked with `onLinkPress`:
@@ -73,4 +92,7 @@
 
-### custom element rendering
 
+ If you're getting the error "undefined is not an object (evaluating 'RCTLinkingManager.openURL’)” from the LinkingIOS API, try adding ‘RCTLinking' to the project's 'Linked Frameworks and Libraries’. You might have to find RCTLinking.xcodeproj in the react-native package dir and drag that into your main Xcode project first.
+
+### Custom Element Rendering
+
 You can implement the `renderNode` prop to add support for unsupported element
@@ -82,3 +104,3 @@ types,  or override the rendering for supported types.
 ```js
-function renderNode(node, index, siblings, parent) {
+function renderNode(node, index, siblings, parent, defaultRenderer) {
   if (node.name == 'iframe') {
@@ -110,18 +132,11 @@ const a = node.attribs;
 
-### screenshot
+### Changelog
 
-In action (from [ReactNativeHackerNews](https://github.com/jsdf/ReactNativeHackerNews)):
-
-![React Native Hacker News Comments](http://i.imgur.com/FYOgBYc.png)
-
-### troubleshooting
-
- If you're getting the error "undefined is not an object (evaluating 'RCTLinkingManager.openURL’)” from the LinkingIOS API, try adding ‘RCTLinking' to the project's 'Linked Frameworks and Libraries’. You might have to find RCTLinking.xcodeproj in the react-native package dir and drag that into your main Xcode project first.
-
-
-### changelog
-
+- 0.9.0
+  - exposed `styles` prop
+  - exposed `defaultRenderer` in `renderNode` (@brandonreavis, @koenpunt)
+  - added `addLineBreaks` (@jmacedoit)
 - 0.7.0 - fixed for recent versions of react-native
-- 0.6.0 - onLinkPress fix ([@damusnet](https://github.com/damusnet)), headers now only have one single line break ([@crysfel](https://github.com/crysfel))
-- 0.5.0 - react-native 0.25 compat ([@damusnet](https://github.com/damusnet))
+- 0.6.0 - onLinkPress fix (@damusnet), headers now only have one single line break (@crysfel)
+- 0.5.0 - react-native 0.25 compat (@damusnet)
 - 0.4.0 - re-renders properly when html content changes

No alert changes

Improved metrics

Total package byte prevSize

178209

increased by0.72%

Lines of code

349

increased by10.09%

Number of lines in readme file

136

increased by12.4%

No dependency changes