React-epubjs NPM

React Epubjs

View epub file in ReactJs application using epub.js

See a demo at: https://ant066.github.io/react-epubjs/

Getting Started

npm i react-epubjs

yarn add react-epubjs

Create new React Epubjs

interface ReaderProps {
  url: any
  fontSize?: string
  fontFamily?: string
  fontColor?: string
  className: string

  showPercentage?: boolean // default is true
  percentString?: string // default is '$percent of this book'

  cfi: string

  onLoad?: (rendition?: Rendition) => void
  onNext?: (rendition?: Rendition) => void
  onPrev?: (rendition?: Rendition) => void
  onRelocated?: (location?: Location) => void

  renderChapters?: (tocs) => React.ReactNode
}

import React from 'react'
import ReactDOM from 'react-dom'
import Reader from 'react-epubjs'
import book from './assets/book.epub'

const root = document.getElementById('root')

const onRelocated = (location) => {
  // save current cfi to localStorage
  const cfi = location.start.cfi
  localStorage.setItem('cfi', cfi)
}

const EpubView = () => {
  // load cfi from localStorage
  const cfi = localStorage.getItem('cfi')

  // must be wrap by an element with height
  return <Reader url={book} onRelocated={onRelocated} cfi={cfi} />
}

ReactDOM.render(<EpubView />, root)