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
; { 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= { console; // access to the readability article object console; // access to the cleaned HTML } onError= { console; } /> </View>
<CleanWebView />
Component for rendering clean web view.
Props
url
- the url to cleanhtmlCss
- custom css that is used with the clean html (view the returnedcleanHtml
property from theonCleaned
callback to see what styles you can customize. These styles are consistent for all URLs)onCleaned
- a callback function that returns areadabilityArticle
and thecleanHtml
onError
- a callback function that returns anerror
object when a problem occurs while cleaning the web page
Objects
This readabilityArticle
object will contain the following properties:
uri
: originaluri
object that was passed to constructortitle
: article titlecontent
: HTML string of processed article contentlength
: length of article, in charactersexcerpt
: article description, or short excerpt from contentbyline
: author metadatadir
: content direction
The cleanHTML
is a string containing the clean HTML.
Development setup
Clone this project from GitHub
npm installnpm test
Bugs / feature requests
If you find any bugs or have a feature request, please create an issue in GitHub.
Contributing
- Fork it (https://github.com/jameslawler/react-native-clean-webview)
- Create your feature branch (
git checkout -b feature/fooBar
) - Commit your changes (
git commit -am 'Add some fooBar'
) - Push to the branch (
git push origin feature/fooBar
) - Create a new Pull Request
License
Distributed under the MIT license. See LICENSE
for more information.