# 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.
## 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 (
);
}
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](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
---
# Contribuing
If you would like to contribute, please follow the [guideline](https://github.com/altmshfkgudtjr/react-epub-viewer/blob/main/CONTRIBUTING.md)! Thank you! 😀
