react-native-clean-webview

react-native-clean-webiew

React Native component for rendering a clean WebView (using Readability algorithm)

React Native component that will render a clean version of a web page using the readability algorithm. The component can override the default CSS styling.

The Readability algorithm is from https://github.com/mozilla/readability

Installation

npm install react-native-clean-webview --save

Usage example

import CleanWebView from 'react-native-clean-webview';

render() {
  let css = `
    img, figure {
      display: none;
    }

    h1 {
      font-size: 1.5em;
      font-weight: bold;
      margin-bottom: 5px;
      letter-spacing: .05em
    }
    
    p {
      letter-spacing: .03em;
    }
  `;

  return (
    <View>
      <CleanWebView
        url='http://www.bbc.com/news/science-environment-42690577'
        htmlCss={ css }
        onCleaned={(readabilityArticle, cleanedHtml) => {
          console.log(readabilityArticle); // access to the readability article object
          console.log(cleanedHtml); // access to the cleaned HTML
        }}
        onError={(error) => {
          console.log(error);
        }}
        />
    </View>
  )

<CleanWebView />

Component for rendering clean web view.

Props

• url - the url to clean
• htmlCss - custom css that is used with the clean html (view the returned cleanHtml property from the onCleaned callback to see what styles you can customize. These styles are consistent for all URLs)
• onCleaned - a callback function that returns a readabilityArticle and the cleanHtml
• onError - a callback function that returns an error object when a problem occurs while cleaning the web page

Objects

This readabilityArticle object will contain the following properties:

• uri: original uri object that was passed to constructor
• title: article title
• content: HTML string of processed article content
• length: length of article, in characters
• excerpt: article description, or short excerpt from content
• byline: author metadata
• dir: content direction

The cleanHTML is a string containing the clean HTML.

Development setup

Clone this project from GitHub

npm install
npm test

Bugs / feature requests

If you find any bugs or have a feature request, please create an issue in GitHub.

Contributing

1. Fork it (https://github.com/jameslawler/react-native-clean-webview)
2. Create your feature branch (git checkout -b feature/fooBar)
3. Commit your changes (git commit -am 'Add some fooBar')
4. Push to the branch (git push origin feature/fooBar)
5. Create a new Pull Request

License

Distributed under the MIT license. See LICENSE for more information.