@ridi/react-viewer

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.

ridi/react-viewer