Package Exports
- flipbook-viewer
- flipbook-viewer/dist/flipbook-viewer.js
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (flipbook-viewer) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
Flipbook Viewer
Amazing flip book component with animated pages.
This is a tiny library that can show flip books from any source (including PDF’s, images, etc).
Advantages
- Tiny (10 Kb packed / 28 Kb unpacked). For comparison, the amazing page-flip is 10 Mb (x1000 times bigger!)
- Can use any input as a book simply by plugging in a “book provider”. An example PDF book using the amazing pdfjs from Mozilla can be found in the test folder—book-pdf.js (referenced usage: test-pdf.js)
- Supports Panning, Zooming, Liking, Sharing, along with page turning effects
- Highly Configurable
- Provides Programmatic API & Hooks for complete control
Usage
Below shows the flip book on the given div with the id div-id:
'use strict'
import { init as flipbook } from 'flipbook-viewer'
...
flipbook(book, 'div-id', (err, viewer) => {
if(err) console.error(err)
viewer.on('seen', n => console.log('page number: ' + n))
viewer.on('liked', liked => console.log('liked: ' + liked))
viewer.on('shared', () => console.log('shared'))
})The viewer can show any flip book. All you need to do is provide a book interface:
{
numPages: () => {
/* return number of pages */
},
getPage: (num, cb) => {
/* return page number 'num'
* in the callback 'cb'
* as any CanvasImageSource:
* (CSSImageValue, HTMLImageElement,
* SVGImageElement, HTMLVideoElement,
* HTMLCanvasElement, ImageBitmap,
* OffscreenCanvas)
*/
}
}Options
An optional opts parameter can be passed in to change the UI:
const opts = {
backgroundColor: "#353535",
toolbarSeparator: "#9e9e9e",
toolbarColor: "#353535",
toolbarSize: 24,
boxColor: "#353535",
boxBorder: 4,
width: 800,
height: 600,
}
flipbook(book, 'div-id', opts, (err, viewer) => ...Events
You can listen on the viewer for the following events:
viewer.on('seen', n => ...)
viewer.on('liked', liked => ...)
viewer.on('shared', () => ...)Programmatic API
The returned viewer can be used to programmatically control the viewer:
viewer.nav.nextPage()
viewer.nav.prevPage()
viewer.zoom()
viewer.share()
viewer.heart() // toggles. viewer.heart(0) / viewer.heart(1) to setEnjoy!