React ePub reader
An ePub-reader for react powered by EpubJS #react #epubjs #webpack #babel #standardjs
In beta
Since it the underlaying library is using epub.js we need their v0.3 version to be finalized which bring commom modules to the library. Write now we use a custom fork of the work in progress 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.
Usage
npm install react-reader --save
And in your react-component...
{ 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= console /> </div> }
ReactReader props
url
[string, required] - url to the epub-file, if its on another domain, remember to add cors for the filetitle
[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-navlocation
[string, number] - set / update location of the epublocationChange
[func] - a function that recives the current location while user is readingtocChange
[func] - when the the reader has parsed the book you will recive an array of the chapters
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
{ 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= console tocChanged= console /> </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 epublocationChange
[func] - a function that recives the current location while user is readingtocChange
[func] - when the the reader has parsed the book you will recive an array of the chapters