react-reader-ali v0.18.10
React ePub reader
An ePub-reader for react powered by EpubJS #react #epubjs #webpack #babel #standardjs
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.
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...
import React, { Component } from "react";
import { ReactReader } from "react-reader";
class App extends Component {
render() {
return (
<div style={{ position: "relative", height: "100%" }}>
{" "}
// * Container needs a height..
<ReactReader
url={"/alice.epub"}
title={"Alice in wonderland"}
location={"epubcfi(/6/2[cover]!/6)"}
locationChanged={epubcifi => console.log(epubcifi)}
/>
</div>
);
}
}
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-canvasloadingView
element - if you want to customize the loadingViewshowToc
bool - wheather to show the toc / toc-navlocationChanged
func - a function that recives the current location while user is readingtocChanged
func - when the the reader has parsed the book you will recive an array of the chaptersstyles
object - override the default stylesswipeable
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.
Optional use the underlaying EpubView
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
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 */
<div style={{ position: "relative", height: "100%" }}>
<EpubView
url={"/alice.epub"}
location={"epubcfi(/6/2[cover]!/6)"}
locationChanged={epubcifi => console.log(epubcifi)}
tocChanged={toc => console.log(toc)}
/>
</div>
);
}
}
EpubView props
url
string, required - url to the epub-file, if its on another domain, remember to add cors for the fileloadingView
element - if you want to customize the loadingViewlocation
string, number - set / update location of the epublocationChanged
func - a function that recives the current location while user is readingtocChanged
func - when the the reader has parsed the book you will recive an array of the chaptersstyles
object - override the default stylesepubInitOptions
object - pass custom properties to the epub init function, see epub.jsepubOptions
object - pass custom properties to the epub rendition, see epub.js's book.renderTo functiongetRendition
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 <title/>
tag in an old epub, which would render as a blank page if not fixed:
const DOMParser = window.DOMParser
class OwnParser {
parseFromString(markup, mime) {
if (markup.indexOf('<title/>') !== -1) {
markup = markup.replace('<title/>', '');
}
return new DOMParser().parseFromString(markup, mime)
}
}
window.DOMParser = OwnParser
Usage in cordova
There is a limitation with iframe and srcdoc
so you need to add this to your config.xml to make react-reader work within an cordova application:
<allow-navigation href="about:*" />
See stackoverflow.com/questions/39165545/cordova-iframe-with-html-inside-not-showing-on-ios-device