You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
137 lines
3.3 KiB
137 lines
3.3 KiB
<div align=left> |
|
<br /> |
|
<a href="https://github.com/altmshfkgudtjr/react-epub-viewer"><img src="https://user-images.githubusercontent.com/47492535/115000155-73a3ae80-9edd-11eb-8ae9-a19e1c012d35.png" alt="react_epub" style="zoom:50%;" /></a> |
|
<br /> |
|
<br /> |
|
</div> |
|
|
|
|
|
# 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. |
|
|
|
|
|
|
|
<br /> |
|
|
|
|
|
|
|
## Getting Started |
|
|
|
📢 **[Online demo](https://altmshfkgudtjr.github.io/react-epub-viewer)** |
|
|
|
**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 ( |
|
<div style={{ position: "relative", height: "100%" }}> |
|
<ReactEpubViewer |
|
url={'files/Alices Adventures in Wonderland.epub'} |
|
ref={viewerRef} |
|
/> |
|
</div> |
|
); |
|
} |
|
|
|
export default App |
|
``` |
|
|
|
You can find other parameters in [Component Props](##Component Props). |
|
|
|
|
|
|
|
<br /> |
|
|
|
|
|
|
|
## 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 |
|
|
|
|
|
|
|
<br /> |
|
|
|
|
|
|
|
--- |
|
|
|
|
|
|
|
|