Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/altmshfkgudtjr/react-epub-viewer
Epub Viewer Component for React.js.
https://github.com/altmshfkgudtjr/react-epub-viewer
epub epub-reader epub-viewer hacktoberfest react viewer
Last synced: 2 days ago
JSON representation
Epub Viewer Component for React.js.
- Host: GitHub
- URL: https://github.com/altmshfkgudtjr/react-epub-viewer
- Owner: altmshfkgudtjr
- License: mit
- Created: 2021-04-11T12:59:26.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2025-01-14T17:05:22.000Z (10 days ago)
- Last Synced: 2025-01-15T09:53:24.127Z (9 days ago)
- Topics: epub, epub-reader, epub-viewer, hacktoberfest, react, viewer
- Language: TypeScript
- Homepage: https://altmshfkgudtjr.github.io/react-epub-viewer/
- Size: 4.18 MB
- Stars: 102
- Watchers: 4
- Forks: 31
- Open Issues: 23
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
- Codeowners: .github/CODEOWNERS
Awesome Lists containing this project
README
# React-Epub-Viewer
[](https://www.npmjs.com/package/react-epub-viewer) [](https://www.npmjs.com/package/react-epub-viewer)
**React-Epub-Viewer** is Epub Viewer for React.js powered by [Epub.js](https://github.com/futurepress/epub.js/) v0.3
You can use React-Epub-Viewer together with React.
## Getting Started
📢 **[Online Demo](https://altmshfkgudtjr.github.io/react-epub-viewer)**
👉 You can check the **[Demo Code](https://github.com/altmshfkgudtjr/react-epub-viewer/tree/demo)**
**Features**
- Table of contents
- Setting
- Font
- Font size
- Line height
- Viewer horizontal margin
- Viewer vertical margin
- Change viewer type
- Scrolled-doc [`true`/`false`]
- Spread [`true`/`false`]
- Current Page Information
- Current chapter name
- Current page number
- Total page number
- Move page by arrow keys
- Highlight (Using `mouseup` event)
- Select highlight color
### Getting the Code
Install library from [NPM](https://www.npmjs.com/package/react-epub-viewer)
```shell
npm install react-epub-viewer
```
Import viewer component
```javascript
import { useRef } from 'react'
import {
EpubViewer,
ReactEpubViewer
} from 'react-epub-viewer'
const App = () => {
const viewerRef = useRef(null);
return (
);
}
export default App
```
You can find other parameters in [Component Props](##Component Props).
## Component Props
You can see also Types for React-Epub-Viewer [here](https://github.com/altmshfkgudtjr/react-epub-viewer/blob/main/src/types/index.d.ts).
### EpubViewer Props
- `ref` - [RefObject] Viewer Ref
- `url` - [string] - Epub file path
- `epubFileOptions` - [[object](http://epubjs.org/documentation/0.3/#book)] Epub file option (Epub.js BookOption)
- `epubOptions` - [[object](http://epubjs.org/documentation/0.3/#rendition)] Epub viewer option (Epub.js RenditionOption)
- `style` - [object] Epub wrapper style
- `location` - [string] Epub [CFI](http://idpf.org/epub/linking/cfi/epub-cfi.html) or Spine href
- `bookChanged` - [function] Run when epub book changed
- `renditionChanged` - [function] Run when rendition changed
- `pageChanged` - [function] Run when page changed
- `tocChanged` - [function] Run when toc changed
- `selectionChanged` - [function] Run when selected
- `loadingView` - [ReactNode] React Loading Component
### ReactEpubViewer Props
- `ref` - [RefObject] Viewer Ref
- `url` - [string] Epub file path
- `viewerLayout` - [object] Viewer layout values (header height, footer height, etc...)
- `viewerOption` - [object] Viewer option (whether is flow or is spread)
- `onBookInfoChange` - [function] Run when book information changed
- `onPageChange ` - [function] Run when page changed
- `onTocChange ` - [function] Run when toc changed
- `onSelection ` - [function] Run when selected
- `loadingView` - [ReactNode] React Loading Component
---
# Contribuing
If you would like to contribute, please follow the [guideline](https://github.com/altmshfkgudtjr/react-epub-viewer/blob/main/CONTRIBUTING.md)! Thank you! 😀