3.5 KiB

Raw Blame History

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! 😀

3.5 KiB Raw Blame History