https://github.com/j-mendez/react-native-reader
Cross-platform native reader mode for react-native (safari like)
https://github.com/j-mendez/react-native-reader
react-native-reader readability safari-reader
Last synced: 7 months ago
JSON representation
Cross-platform native reader mode for react-native (safari like)
- Host: GitHub
- URL: https://github.com/j-mendez/react-native-reader
- Owner: j-mendez
- License: mit
- Created: 2018-12-21T14:01:57.000Z (almost 7 years ago)
- Default Branch: main
- Last Pushed: 2023-06-24T16:11:44.000Z (over 2 years ago)
- Last Synced: 2024-05-07T21:07:00.954Z (over 1 year ago)
- Topics: react-native-reader, readability, safari-reader
- Language: TypeScript
- Homepage:
- Size: 608 KB
- Stars: 61
- Watchers: 5
- Forks: 11
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
## react-native-reader
[](https://codeclimate.com/github/j-mendez/react-native-reader/maintainability)
[](https://circleci.com/gh/j-mendez/react-native-reader)
An iOS/Android lightning fast component that renders any web url into clean native views to display content.
Main Feature:
- This provides a Safari reader mode like feel that display's content cleanly (For Reading)
How to use:
- Just pass in a Url into the component and your good to go.
If you need to use this in a web browser theres a react version [react-reader-view](https://github.com/A11yWatch/react-reader)
## Installation Instructions
```bash
$ npm install react-native-reader
```
## Example
```typescript
import ReaderView from "react-native-reader";
;
```
## Available Props
| prop | default | type | description |
| --------------------- | --------- | -------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------- |
| url | "" | string | Required: A web url source |
| html | "" | string | Optional: A html string to render instead (`url` is still required to get reading material) |
| lazy | false | boolean | Optional: Lazily set view for reading. - if set to true make sure to call `parseHtml` via refs |
| renderLoader | null | Component | Optional: A custom component to render while your content is being loaded |
| title | "" | string | Optional: A title to enforce for the content. Helps when a website has multiple h1 tags or (dirty html) |
| titleStyle | undefined | object | Optional: Controls the styling of the title component of the reader. |
| containerStyle | undefined | object | Optional: Controls the styling of the outer wrapper of the reader. |
| contentContainerStyle | undefined | object | Optional: Controls the content styling of the scrollview wrapper of the reader. |
| loaderContainerStyle | undefined | object | Optional: Controls the styling of the container for the spinner that appears when content is loading |
| indicatorProps | undefined | object | Optional: Exposes all [ActivityIndicator](https://facebook.github.io/react-native/docs/activityindicator) props |
| onError | null | function | Optional: A function that fires the error if a url is not valid |
| errorPage | "" | string | Optional: html string to render if page errors |
| config | undefined | [Config](https://github.com/A11yWatch/clean-html-js/blob/master/src/clean-html.ts#L23) | Optional: configure html element determination |
This package also exposes every prop for react-native-htmlview. For the list of all available props check out [Other Props](https://github.com/jsdf/react-native-htmlview)