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