|  | 5 years ago | |
|---|---|---|
| .github/ISSUE_TEMPLATE | 5 years ago | |
| public | 5 years ago | |
| src | 5 years ago | |
| .babelrc | 5 years ago | |
| .gitignore | 5 years ago | |
| .gitmessage.txt | 5 years ago | |
| .npmignore | 5 years ago | |
| CONTRIBUTING.md | 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
Contribuing
If you would like to contribute, please follow the guideline! Thank you! 😀
