React book reader component

 

React component that allows you to set a PDF reader in your website with some features like: Read PDF in black mode, expand the PDF to fullscreen, download the file and bookmark it.

* TypeScript 4
* Linting with typescript-eslint (tslint is deprecated)
* Testing with Testing-library
* Continuous integration (GitHub Actions)
* Docs with Storybook TypeDoc

Demo

A minimal demo page can be found in our storybook documentation. Online demo

Getting Started

$3

``bash
npm i browser-book-reader

Or

yarn add browser-book-reader
...
`

$3

Here's an example of basic usage:

`javascript
import React from 'react';
import { BookReader } from 'browser-book-reader';

function myApp() {
const onDownload = () => {
// do something
};

return (
file="somefile.pdf"
mode="full"
onDownload={onDownload}
/>
)
}
`

User guide

$3

Displays a reader of a file.

|Prop name|Description|Default value|Example values|
|----|----|----|----|
file|The PDF that will be display in the reader. The file can be an url or a file imported (imported using import ... from ... or from file input form element)|n/a|

• URL:
"http://example.com/sample.pdf"
• File:
import sample from '../static/sample.pdf' and then
sample
• Parameter object:
{ url: 'http://example.com/sample.pdf', httpHeaders: { 'X-CustomHeader': '40359820958024350238508234' }, withCredentials: true }`

|
mode|The mode that will be diplay the document. Can be displayed page by page with controls to change the page or it can be displyed as a full document with an scroll. Can be "divided" or "full"|"divided"|"divided" or "full"|
bookmarked|A boolean that indicates to the reader if the book is bookmarked. Can be true or false|n/a|true or false|
onDownload|The callback function that will be executed when the user press the download button. If this function is not provided the button doesn't appears|n/a|() => { downloadPDF();}|
onBookMark|The callback function that will be executed when the user press the bookmark button. If this function is not provided the button doesn't appears|n/a|() => { bookmark();}|
barColor|String to set the color of the bottom bar that contains the action buttons|n/a|"#fff"|
styles|String with styles that will be applied to the wrapper of the reader|n/a|"background: #fff; color: #000"|