0.7.0 • Published 2 years ago
browser-book-reader v0.7.0
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 | URL:"http://example.com/sample.pdf"File:import sample from '../static/sample.pdf' and thensampleParameter 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" |