https://github.com/a11ywatch/react-reader
Cross browser web reader mode (safari like)
https://github.com/a11ywatch/react-reader
cross-browser cross-browser-reader react react-readability react-reader react-reader-view safari-reader
Last synced: 10 days ago
JSON representation
Cross browser web reader mode (safari like)
- Host: GitHub
- URL: https://github.com/a11ywatch/react-reader
- Owner: a11ywatch
- License: mit
- Created: 2020-02-08T02:13:17.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2023-01-06T15:12:24.000Z (over 2 years ago)
- Last Synced: 2025-03-29T10:43:45.715Z (about 1 month ago)
- Topics: cross-browser, cross-browser-reader, react, react-readability, react-reader, react-reader-view, safari-reader
- Language: TypeScript
- Homepage:
- Size: 558 KB
- Stars: 10
- Watchers: 2
- Forks: 0
- Open Issues: 10
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
## react-reader-view
[](https://circleci.com/gh/j-mendez/react-reader)
Load any url into clean plain text for reading
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 natively theres a react-native version [react-native-reader](https://github.com/j-mendez/react-native-reader)
## Installation Instructions
```bash
$ npm install react-reader-view
```
## Example
```typescript
import ReaderView from "react-reader-view";
;
```
- For more help getting started checkout [Example](https://github.com/A11yWatch/react-reader-example-project)
## Available Props
| prop | default | type | description |
| ------------ | ------------ | -------------------------------------------------------------------------------------- | ------------------------------------------------------------------------- |
| url | "" | string | Required: A valid web url source |
| css | "" | string | Optional: A css stylesheet as a string |
| renderLoader | "Loading..." | Component | Optional: A custom component to render while your content is being loaded |
| iframeProps | null | object | Optional: A valid iframe html property |
| onParse | null | function | Optional: A callback function that returns the readability Object |
| onError | null | function | Optional: A function that fires the error if a url is not valid |
| config | undefined | [Config](https://github.com/A11yWatch/clean-html-js/blob/master/src/clean-html.ts#L23) | Optional: configure html element determination |