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:

• Examples running on Expo Project
• Examples running on Bare React Native Project

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

License

MIT