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
Installation
npm i browser-book-reader
# Or
yarn add browser-book-reader
...
Usage
Here's an example of basic usage:
import React from 'react';
import { BookReader } from 'browser-book-reader';
function myApp() {
const onDownload = () => {
// do something
};
return (
<BookReader
file="somefile.pdf"
mode="full"
onDownload={onDownload}
/>
)
}
User guide
BookReader
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 |
|
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" |