https://ridi.github.io/react-viewer/demo/
npm install @ridi/react-viewer
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);
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
restoreState
(Object
): state object for restoring redux storeconfig
(Object
)
beforeContentCalculated
: Check out Hooks section for more details<Reader>
ComponentReader
component provides all functionality of viewer and renders viewer body.
Here are Reader
's properties:
footer
(node): markup for the footer areacontentFooter
(node): markup for the content footer areaselectable
(boolean): set reader to be selectableannotationable
(boolean): set reader to be annotationableannotations
(array): annotation list is composed of items that has distinct id
property. 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
data
(Object
)
contentFormat
(ContentFormat
)bindingType
(BindingType
)uris
(Array
): Array of uri to fetch contentEvents.SET_CONTENTS_BY_VALUE
(emmitable): Check out Render Contents section for more details
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
event
(ScrollEvent
)Events.TOUCH
(listenable): Screen is touched (or annotation is touched)
event
(TouchEvent
)
type
(TouchEvent
): TouchEvent.Touch
or TouchEvent.AnnotationTouch
detail
screenX
screenY
clientX
clientY
pageX
pageY
type
: original event typetarget
: original event targetannotation
: annotation infoEvents.CHANGE_SELECTION
(listenable): Current selection is changed
event
(Object
)
selection
: selection infoselectionMode
(SelectionMode
)Events.MOUNTED
(listenable): <Reader>
has been mountedEvents.UNMOUNTED
(listenable): <Reader>
has been unmountedYou 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
contentIndex
(number): index number of current calculating contentreaderJsHelper
(ReaderJsHelper
): ReaderJsHelper
instance mounted on this current calculating contentafterContentCalculated
: executed just right after per content calculation is completed
calculations
(Array): current status of calculationsEvents.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)$ npm install
$ npm run install:demo
$ npm run watch
Browse http://localhost:8000.