browser-book-reader

0.7.0 • Public • Published

React book reader component

Build and test status tested with testing library

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.

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 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"

Package Sidebar

Install

npm i browser-book-reader

Weekly Downloads

1

Version

0.7.0

License

MIT

Unpacked Size

67.8 kB

Total Files

88

Last publish

Collaborators

  • imrodriguez