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

npx 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

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

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.
• annotations: A array containing the book's annotations.
• chapter: A current chapter.
• chapters: A array containing the book's chapters. Also called table of contents(toc).

The meta 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.

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