React-epub-viewer NPM

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

📢 Online Demo 👉 You can check the Demo Code

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

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