Skip to content
Online EPUB/Comics viewer
JavaScript
Branch: master
Clone or download
Latest commit 76b387c Jun 13, 2019

README.md

@ridi/react-viewer

Build Status npm version Greenkeeper badge

Demo

https://ridi.github.io/react-viewer/demo/

Installation

npm install @ridi/react-viewer

How to Use

Initialize

Add @ridi/react-viewer reducer into your reducers.

import { reducers as reader } from '@ridi/react-viewer';
import { combineReducers } from 'redux';

const appReducer = combineReducers({
    ...
    reader,
    ...
});

Connect Connector with redux store.

import { createStore } from 'redux';
import { Connector } from '@ridi/react-viewer';

const store = createStore( ... );
Connector.connect(store);

Quick start

Service must be loaded for initializing Reader's lifecycle.

And put Reader component into your component.

import React from 'react';
import Reader, { Service } from '@ridi/react-viewer';

Service.loadAll();
export default ViewerPage extends React.Component {
    render() {
        return <Reader />;
    }
};

Service

  • loadAll
    • params:
      • restoreState(Object): state object for restoring redux store
      • config(Object)
        • beforeContentCalculated: Check out Hooks section for more details

<Reader> Component

Reader component provides all functionality of viewer and renders viewer body.

Here are Reader's properties:

  • footer(node): markup for the footer area
  • contentFooter(node): markup for the content footer area
  • selectable(boolean): set reader to be selectable
  • annotationable(boolean): set reader to be annotationable
  • annotations(array): annotation list is composed of items that has distinct id property.

Events

Below events can be used with EventBus

import { EventBus, Events, TouchEvent } from '@ridi/react-viewer';

EventBus.on(Events.TOUCH, (event) => {
  const { clientX, clientY, annotation } = event.detail;
  if (event.type === TouchEvent.TouchAnnotation) {
    console.log(annotation);
  } else {
    console.log(clientX, clientY);
  }
});

EventBus.emit(Events.SET_CONTENTS_BY_URI, { ... });
  • Events.SET_CONTENTS_BY_URI (emmitable): Check out Render Contents section for more details
    • params:
      • data(Object)
        • contentFormat(ContentFormat)
        • bindingType(BindingType)
        • uris(Array): Array of uri to fetch content
  • Events.SET_CONTENTS_BY_VALUE (emmitable): Check out Render Contents section for more details
    • params:
      • data(Object)
        • contentFormat(ContentFormat)
        • bindingType(BindingType)
        • contents(Array): Array of HTML document(contentFormat === ContentFormat.HTML) or base64 encoded image source(contentFormat === ContentFormat.IMAGE)
  • Events.SCROLL(listenable): Screen is scrolled
    • params:
      • event(ScrollEvent)
  • Events.TOUCH(listenable): Screen is touched (or annotation is touched)
    • params:
      • event(TouchEvent)
        • type(TouchEvent): TouchEvent.Touch or TouchEvent.AnnotationTouch
        • detail
          • screenX
          • screenY
          • clientX
          • clientY
          • pageX
          • pageY
          • type: original event type
          • target: original event target
          • annotation: annotation info
  • Events.CHANGE_SELECTION(listenable): Current selection is changed
    • params:
      • event(Object)
        • selection: selection info
        • selectionMode(SelectionMode)
  • Events.MOUNTED(listenable): <Reader> has been mounted
  • Events.UNMOUNTED(listenable): <Reader> has been unmounted

Hooks

You would use hooks when you want to intercept some point of reader's lifecycle. Hook implementations can return value in any forms compatible with RxJS's ObservableInput.

  • beforeContentCalculated: executed just right before per content calculation is completed

    • params:
      • contentIndex(number): index number of current calculating content
      • readerJsHelper(ReaderJsHelper): ReaderJsHelper instance mounted on this current calculating content
  • afterContentCalculated: executed just right after per content calculation is completed

    • params:
      • calculations(Array): current status of calculations

Render Contents

Events.SET_CONTENTS_BY_URI or Events.SET_CONTENTS_BY_VALUE

Whole contents with metadata must set in a time. Emit Events.SET_CONTENTS_BY_(URI/VALUE) event with URIs of contents or contents loaded already.

import {
  ContentFormat,
  BindingType,
  EventBus,
  Events,
} from '@ridi/react-viewer';

EventBus.emit(Events.SET_CONTENTS_BY_URI, {
  contentFormat: ContentFormat.HTML,
  bindingType: BindingType.LEFT,
  uris: [
    './uri1.json',
    './uri2.json',
    ...,
  ],
});

EventBus.emit(Events.SET_CONTENTS_BY_VALUE, {
  contentFormat: ContentFormat.HTML,
  bindingType: BindingType.LEFT,
  contents: [
    '<p>...</p>',
    '<p>...</p>',
    ...,
  ],
});
  • contentFormat: content format (HTML: 0, IMAGE: 1)
  • bindingType: binding type (LEFT: 0, RIGHT: 1)

How to Run Demo

$ npm install
$ npm run install:demo
$ npm run watch

Browse http://localhost:8000.

You can’t perform that action at this time.