Skip to content

zetlanddk/epubjs-react-native

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

epubjs-react-native

A digital book reader in .opf .epub format for react native using epub.js library inside a webview.

Installation

npm install @epubjs-react-native/core
yarn add @epubjs-react-native/core

follow these steps below based on the type of project you want to apply this library:

Bare Installation

npm install @epubjs-react-native/file-system react-native-fs react-native-webview react-native-gesture-handler
yarn add @epubjs-react-native/file-system react-native-fs react-native-webview react-native-gesture-handler

Expo Installation

expo install @epubjs-react-native/expo-file-system react-native-fs react-native-webview react-native-gesture-handler

If you develop for iOS use this command for install CocoaPods deps (if you use an expo managed project you don't need this)

In your ios project folder run:

npx pod install

Usage

import * as React from 'react';

import { SafeAreaView, useWindowDimensions } from 'react-native';
import { Reader, ReaderProvider } from '@epubjs-react-native/core';
// import { useFileSystem } from '@epubjs-react-native/file-system'; // for Bare React Native project
// import { useFileSystem } from '@epubjs-react-native/expo-file-system'; // for Expo project

export default function App() {
  const { width, height } = useWindowDimensions();
  return (
    <SafeAreaView>
      <ReaderProvider>
        <Reader
          src="https://s3.amazonaws.com/moby-dick/OPS/package.opf"
          width={width}
          height={height}
          fileSystem={useFileSystem}
        />
      </ReaderProvider>
    </SafeAreaView>
  );
}

Reader Params

Param Type Description
src string Can be a base64, epub, opf. Required.
width number The width of the ePub Rendition. Required.
height number The height of the ePub Rendition. Required.
fileSystem function A function that returns a FileSystem object. Required.
initialLocation ePubCfi Can be an ePubCfi or chapter url. Optional.
enableSwipe boolean Enable swipe actions. Default is true.
onSwipeLeft function Called when swipe left gesture is detected. Optional.
onSwipeRight function Called when swipe right gesture is detected. Optional.
renderLoadingFileComponent JSX.Element Render when the book is loading. Optional.
renderOpeningBookComponent JSX.Element Appears when the book is been rendering. Optional.
onStarted function Called once the book loads is started. Optional.
onReady function Called once book has been displayed. Optional.
onDisplayError function Called once book has not been displayed. Optional.
onRendered function Emit that a section has been rendered. Optional.
onResized function Called when occurred a page change. Optional.
onLocationChange function Called when occurred a page change. Optional.
onSearch function Called once when the book has been searched. Optional.
onLocationsReady function Called once the locations has been generated. Optional.
onSelected function Called once a text selection has occurred. Optional.
onMarkPressed function Called when marked text is pressed. Optional.
onOrientationChange function Called when screen orientation change is detected. Optional.
onPress function Called when the book was pressed. Optional.
onDoublePress function Called when the book was double pressed. Optional.
onBeginning function Called when the book is on the homepage. Optional.
onFinish function Called when the book is on the final page. Optional.
onLayout function Called when book layout is change. Optional.
defaultTheme object Theme object. Optional.

Hooks

useReader

useReader() is a customized hook that will return all Book states and the methods that will help you. Make sure you use it within the ReaderProvider

const { changeFontSize, goToLocation, ... } = useReader();
Methods
Method Receives Description
changeFontSize size Change font size of all elements in the book. Can be a px, pt or percent.
changeFontFamily font Change font family of all elements in the book
goToLocation cfi Go to specific location in the book
getLocations Get the total locations of the book
goPrevious Go to previous page in the book
goNext Go to next page in the book
search query Search for a specific text in the book
changeTheme theme Change active theme
getCurrentLocation Returns the current location of the book
addMark Add mark a specific cfi in the book
removeMark Remove mark a specific cfi in the book
getMeta Returns an object containing the book's metadata.

The metadata object contains:

  • cover (string, ArrayBuffer, null or undefined): The book's cover image e.g.data:image/jpeg;base64,/9j/4AAQSkZJ...
  • author (string): The name of the book's creator/author e.g. Herman Melville
  • title (string): The book's title e.g. Moby-Dick
  • description (string): The book's description/summary.
  • language (string) : The book's language e.g. en-US
  • publisher (string): The eBook's publisher e.g. Harper & Brothers, Publishers
  • rights (string): The book's rights e.g. This work is shared with the public using the Attribution-ShareAlike 3.0 Unported (CC BY-SA 3.0) license.
States
  • theme: A object containing theme.
  • key: Works like a unique id for book.
  • atStart: Indicates if you are at the beginning of the book.
  • atEnd: Indicates if you are at the end of the book.
  • currentLocation: The current location of the book.
  • totalLocations: The total number of locations.
  • progress: The progress of the book.
  • isLoading: Indicates if the book is loading.
  • searchResults: Search results.
  • meta: A object containing the book's metadata.

Examples

You can see the examples in these repositories:

Did you like this project? Consider sponsoring the development of this project to keep it alive! ❤️

License

MIT

About

ePub.js Reader for React Native

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • TypeScript 97.1%
  • Java 1.5%
  • C++ 0.7%
  • Objective-C++ 0.4%
  • JavaScript 0.1%
  • Makefile 0.1%
  • Other 0.1%