| 
				
					
						
							 | 
			5 years ago | |
|---|---|---|
| public | 5 years ago | |
| src | 5 years ago | |
| .babelrc | 5 years ago | |
| .gitignore | 5 years ago | |
| .npmignore | 5 years ago | |
| LICENSE | 5 years ago | |
| README.md | 5 years ago | |
| package.json | 5 years ago | |
| tsconfig.json | 5 years ago | |
| yarn.lock | 5 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 
