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

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

---

Contribuing

If you would like to contribute, please follow the guideline! Thank you! 😀