You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
NB 38084c713b v0.1.6 4 years ago
.github/ISSUE_TEMPLATE Update issue templates 4 years ago
public Remove unnecessary files 4 years ago
src Remove unnecessary files 4 years ago
.babelrc modules alpha version init 4 years ago
.gitignore update Reademe file 4 years ago
.npmignore modules alpha version init 4 years ago
LICENSE Initial commit 4 years ago
README.md Update README.md 4 years ago
package.json v0.1.6 4 years ago
tsconfig.json modules alpha version init 4 years ago
yarn.lock Remove unnecessary files 4 years ago

README.md


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

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