Skip to content

altmshfkgudtjr/react-epub-viewer

Repository files navigation


react_epub

React-Epub-Viewer

Latest Stable Version License

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



Contribuing

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