React ePub reader

An ePub-reader for react powered by EpubJS #react #epubjs #webpack #babel #standardjs

See demo

!React Reader logo

React wrapper for epubjs

React reader is an react-wrapper for epub.js, using the v.03 branch.

About

epub.js is a great library, and this is a wrapper for this library, making it easier to use in a React-app.

``js
import {
EpubView, // Underlaying epub-canvas (wrapper for epub.js iframe)
EpubViewStyle, // Styles for EpubView, you can pass it to the instance as a style prop for customize it
ReactReader, // A simple epub-reader with left/right button and chapter navigation
ReactReaderStyle // Styles for the epub-reader it you need to customize it
} from "react-reader";
`

Usage

npm install react-reader --save

And in your react-component...

`js
import React, { Component } from "react";
import { ReactReader } from "react-reader";

class App extends Component {
render() {
return (



);
}
}
`

See demo/App.js for an example of using the selection api in epubjs.

#### ReactReader props

- title [string] - the title of the book, displayed above the reading-canvas
- loadingView [element] - if you want to customize the loadingView
- showToc [bool] - wheather to show the toc / toc-nav
- locationChanged [func] - a function that recives the current location while user is reading
- tocChanged [func] - when the the reader has parsed the book you will recive an array of the chapters
- styles [object] - override the default styles
- swipeable [bool, default false] - enable swiping left/right with react-swipeable. _Warning_ this will disable interacting with epub.js iframe content like selection

Additional props will be passed to the underlaying EpubView component, like url, location, epubOptions, epubInitOptions and getRendition.

_Container needs a height.._
The ReactReader will expand to 100% of width/height, so be sure to set a height on the parent element, either with position it absolute of window, set height or use paddingTop for proporsjonal scaling.

$3

This is just the plain epub canvas, you will then need to implement the reader stuff like chapter (toc) navigation and next/prev buttons. Take a look at the implemention in ReactReader.js

`js
import React, { Component } from "react";
import { EpubView } from "react-reader";

class App extends Component {
render() {
return (
/ The ReactReader will expand to 100% of width/height, so be sure to set a height on the parent element, either with position it absolute of window, set height or use paddingTop for proporsjonal scaling /



);
}
}
`

#### EpubView props

- url [string, required] - url to the epub-file, if its on another domain, remember to add cors for the file
- loadingView [element] - if you want to customize the loadingView
- location [string, number] - set / update location of the epub
- locationChanged [func] - a function that recives the current location while user is reading
- tocChanged [func] - when the the reader has parsed the book you will recive an array of the chapters
- styles [object] - override the default styles
- epubInitOptions [object] - pass custom properties to the epub init function, see epub.js
- epubOptions [object] - pass custom properties to the epub rendition, see epub.js's book.renderTo function
- getRendition [func] - when epubjs has rendered the epub-file you can get access to the epubjs-rendition object here

#### Handling not valid epub-files

A tip if you have problems with not valid epub-files is to override the build in DOMParser and modify the markup-string passed to its parseFromString function. This example fixes a not valid