|
|
3 years ago | |
|---|---|---|
| public | 4 years ago | |
| src | 4 years ago | |
| .babelrc | 5 years ago | |
| .gitignore | 3 years ago | |
| .npmignore | 5 years ago | |
| LICENSE | 5 years ago | |
| README.md | 5 years ago | |
| package.json | 4 years ago | |
| tsconfig.json | 5 years ago | |
| yarn.lock | 4 years ago | |
README.md
React-Epub-Viewer
React-Epub-Viewer is Epub Viewer for React.js powered by Epub.js v0.3
You can use React-Epub-Viewer together with React.
Getting Started
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]
- Scrolled-doc [
-
Current Page Information
- Current chapter name
- Current page number
- Total page number
-
Move page by arrow keys
-
Highlight (Using
mouseupevent)- Select highlight color
Getting the Code
Install library from NPM
npm install react-epub-viewer
Import viewer component
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).
Component Props
You can see also Types for React-Epub-Viewer here.
EpubViewer Props
-
ref[RefObject] Viewer Ref -
url[string] - Epub file path -
epubFileOptions- [object] Epub file option (Epub.js BookOption) -
epubOptions- [object] Epub viewer option (Epub.js RenditionOption) -
style- [object] Epub wrapper style -
location- [string] Epub CFI 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
