NB
38084c713b
|
4 years ago | |
---|---|---|
.github/ISSUE_TEMPLATE | 4 years ago | |
public | 4 years ago | |
src | 4 years ago | |
.babelrc | 4 years ago | |
.gitignore | 4 years ago | |
.npmignore | 4 years ago | |
LICENSE | 4 years ago | |
README.md | 4 years ago | |
package.json | 4 years ago | |
tsconfig.json | 4 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
mouseup
event)- 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