ansu5555 / pdf-viewer-reactjs

A simple PDF viewer for React js

pdf-viewer-reactjs

Simple react PDF Viewer component with controls like

• Page navigation
• Zoom
• Rotation

Every element can be styled upon your preferences using default classes your own and also custom react element can be passed.

Initially it was forked from mgr-pdf-viewer-react

Hit the ⭐ on GitHub if you like it

Example: Live demo is available here

How to install

npm i pdf-viewer-reactjs

Note:

Due to causing broken CSS issue bulma & material-design-icons are removed from dependencies and code as well and added as peerDependencies.

Please install bulma & material-design-icons from npm by yourself

npm i bulma material-design-icons

then import them in your CSS as below

@import url('bulma/css/bulma.css');
@import url('material-design-icons/iconfont/material-icons.css');

Else provide custom CSS styles as per your requirement

How to use

import React from 'react'

import PDFViewer from 'pdf-viewer-reactjs'

const ExamplePDFViewer = () => {
  return (
    <PDFViewer
      document={{
        url: 'https://arxiv.org/pdf/quant-ph/0410100.pdf',
      }}
    />
  )
}

export default ExamplePDFViewer

Documentation

React component prop. types:

document:

• Type:

PropTypes.shape({
  url: String, // URL to the pdf

  base64: String, // PDF file encoded in base64
})

• Required: true

• Description: Provides a way to fetch the PDF document

password:

• Type: String

• Required: false

• Description: For decrypting password-protected PDFs

withCredentials:

• Type: Boolean

• Required: false

• Description: Indicates whether or not cross-site Access-Control requests should be made using credentials such as cookies or authorization headers. The default is false

externalInput:

• Type: Boolean

• Required: false

• Description: By default page number, scale and rotation angle can be set initially using the props but cannot be changed dynamically, to make these props dynamic pass this prop (after passing this prop navbar will become hidden)

page:

• Type: Number

• Required: false

• Description: The page that will be shown first on document load, also can be used to change the page number dynamically after passing externalInput prop

scale:

• Type: Number

• Required: false

• Description: Scale factor relative to the component parent element, also can be used to change the scale dynamically after passing externalInput prop

rotationAngle:

• Type: Number

• Required: false

• Description: Initial rotation of the document, values can be -90, 0 or 90, also can be used to change the rotation angle dynamically after passing externalInput prop

scaleStep:

• Type: Number

• Required: false

• Description: Scale factor to be increased or decreased on Zoom-in or zoom-out

minScale:

• Type: Number

• Required: false

• Description: Minimum scale factor for zoom-out

maxScale:

• Type: Number

• Required: false

• Description: Maximum scale factor for zoom-in

onDocumentClick:

• Type: Function

• Required: false

• Description: A function that will be called only on clicking the PDF page itself, NOT on the navbar

onPrevBtnClick:

• Type: Function

• Required: false

• Description: A function that will be called on clicking on the previous page button, page number can be accessed in the function.

onNextBtnClick:

• Type: Function

• Required: false

• Description: A function that will be called on clicking on the next page button, page number can be accessed in the function.

onZoom:

• Type: Function

• Required: false

• Description: A function that will be called on clicking on Zoom controls, zoom scale can be accessed in the function.

onRotation:

• Type: Function

• Required: false

• Description: A function that will be called on clicking on Rotation controls, rotation angle can be accessed in the function.

getMaxPageCount:

• Type: Function

• Required: false

• Description: A function that will be called on document load, total page count can be accessed in the function.

css:

• Type: String

• Required: false

• Description: CSS classes that will be setted for the component wrapper

canvasCss:

• Type: String

• Required: false

• Description: CSS classes that will be setted for the PDF page

navbarOnTop:

• Type: Boolean

• Required: false

• Description: By default navbar is displayed on bottom, but can be placed on top by passing this prop

hideNavbar:

• Type: Boolean

• Required: false

• Description: By default navbar is displayed, but can be hidden by passing this prop

hideZoom:

• Type: Boolean

• Required: false

• Description: By default zoom buttons are displayed, but can be hidden by passing this prop

hideRotation:

• Type: Boolean

• Required: false

• Description: By default rotation buttons are displayed, but can be hidden by passing this prop

loader:

• Type: Node

• Required: false

• Description: A custom loader element that will be shown while the PDF is loading

alert:

• Type: Node

• Required: false

• Description: A custom alert element that will be shown on error

showThumbnail:

• Type:

PropTypes.shape({
  scale: PropTypes.number, // Thumbnail scale, ranges from 1 to 5

  rotationAngle: PropTypes.number, // Thumbnail rotation angle, values can be -90, 0 or 90. Default is 0

  onTop: PropTypes.bool, // Thumbnail position, if set to true thumbnail will be placed on top

  backgroundColor: PropTypes.string, // Color(hex or rgb) of the thumbnail container

  thumbCss: PropTypes.string, // Custom css class for thumbnails

  selectedThumbCss: PropTypes.string, // Custom css class for selected thumbnail
})

• Required: false

• Description: Details of the thumbnails, not shown if not provided

protectContent:

• Type: Boolean

• Required: false

• Description: By default Right Click and Context Menu are enabled, but can be disabled by passing this prop

watermark:

• Type:

PropTypes.shape({
  text: PropTypes.string, // Watermark text

  diagonal: PropTypes.bool, // Watermark placement true for Diagonal, false for Horizontal

  opacity: PropTypes.string, // Watermark opacity, ranges from 0 to 1

  font: PropTypes.string, // custom font name default is 'Comic Sans MS'

  size: PropTypes.string, // Font Size of Watermark

  color: PropTypes.string, // Color(hex or rgb) of the watermark
})

• Required: false

• Description: Details of the watermark, not shown if not provided

navigation:

• Type:

PropTypes.oneOfType([

// Can be an object with css classes or react elements to be rendered

PropTypes.shape({

css:  PropTypes.shape({

navbarWrapper:  String, // CSS Class for the Navbar Wrapper

zoomOutBtn:  String, // CSS Class for the ZoomOut Button

resetZoomBtn:  String, // CSS Class for the Reset Zoom Button

zoomInBtn:  String, // CSS Class for the ZoomIn Button

previousPageBtn:  String, // CSS Class for the Previous Page button

pageIndicator:  String, // CSS Class for the Page Indicator

nextPageBtn:  String, // CSS Class for the Next Page button

rotateLeftBtn:  String, // CSS Class for the RotateLeft button

resetRotationBtn:  String, // CSS Class for the Reset Rotation button

rotateRightBtn:  String  // CSS Class for the RotateRight button

})

// Or a full navigation component

PropTypes.any  // Full navigation React element

]);

• Required: false

• Description: Defines the navigation bar styles and/or elements.

Author

Ansuman Ghosh

ansu5555.com

pdf-viewer-reactjs's Issues

regeneratorRuntime is not defined

Having this issue while trying to use the lib on Gatsby + TypeScript.

"gatsby": "^2.8.6",
"typescript": "^3.5.3"

WaterMark - ContextMenu

Hello,

Its a way to add a WaterMark foreach PDF pages, also it's possible to disable the context Menu on right click?

Thank you.

pdf-viewer just allow one rotation -90, 0 or 90

Hi,

I just wanted to know why the library just allow one rotation to 90 or -90 degrees. That approach just works for some documents, but if you have a document upside down, how I gonna rotate 180 degrees?

is there any way to fix this?

I'll be waiting for your response.

Thanks in advance.

Leandro,

Download PDF each time when click on Next

Here is my component

import React from 'react';
import PDFViewer from 'pdf-viewer-reactjs';

const AppPDFViewer = ({ url }) => {
  return (
    <PDFViewer
      document={{
        url: 'https://arxiv.org/pdf/quant-ph/0410100.pdf'
      }}
      navbarOnTop
      
    />
  );
};

export default AppPDFViewer;

When it initially renders the pdf file is downloading multiple times.
Also, when clicking on the next button, pdf downloaded every time.

NB: I am rendering mutliple pdf files at one page.

Getting error while using npm run build in github actions auto deploy that "Module not found: Can't resolve 'bulma-helpers/css/bulma-helpers.min.css"

[Describe the bug]

./node_modules/pdf-viewer-reactjs/dist/pdf-viewer-reactjs.js
Module not found: Can't resolve 'bulma-helpers/css/bulma-helpers.min.css' in '/home/dhruvik/actions-runner/node_modules/pdf-viewer-reactjs/dist'

./node_modules/pdf-viewer-reactjs/dist/pdf-viewer-reactjs.js
Module not found: Can't resolve 'bulma/css/bulma.css' in '/home/dhruvik/actions-runner/node_modules/pdf-viewer-reactjs/dist'

./node_modules/pdf-viewer-reactjs/dist/pdf-viewer-reactjs.js
Module not found: Can't resolve 'material-design-icons/iconfont/material-icons.css' in '/home/dhruvik/actions-runner/node_modules/pdf-viewer-reactjs/dist'

Download PDF File

hey how about function for download the file, i am not see option for download file, couse if iam add button with html atribut, it will go to new page with standart browser pdf viewer, so any solution to add button in navigation for dowload the file?

On multiple click of rotate buttons and next buttons while previewing document gives an error message.

Error opening application/octet-stream

[BUG] Navigation Buttons without style

Describe the bug
I install this library (also installed bulma, bulma-helpers and material-icons libs).
But the navigations buttons appears without styling.
I try to define a custom css for each button but I don't know why (a example could be helpfull)

Screenshots

Code:

Result:

in console I got:
"Failed to decode downloaded font: "

Additional context
React App

Error with LaTeX generated file

Hello

At the moment i'm trying to render Latex files in your viewer.
Even with a single hello world compiled with pdflatex main.tex it doesn't work

The errors ar many invalid characters from pdf.worker.js and late an InvalidPDFException {message: "Invalid PDF structure", name: "InvalidPDFException"}

One of the files which doesn't work is this one:
main.pdf
Thers no issue with opening it in SumatraPDF, Adobe Reader or Edge.

I just include your PDFViewer with the document:

import PDFViewer from "pdf-viewer-reactjs";
export default class Test extends Component {
  render() {
    return (
      <PDFViewer
        document={{
          url: "/main.pdf",
        }}
      />
    );
  }
}

Do you have any idea how to fix that issue?

Kind regards
Simon

Styles Override

When implementing this component it completely overrides the website styles with bootstrap. Was really hoping to use it :(

JavaScript out of memory error.

Hello,

I installed the reader in one of my projects, but every time I start my React app, I get a JavaScript out of memory error.

How can this be resolved? Once I remove it from my project, it starts working again, but I need the reader.

Error loading pdf from url

Hi

I'm trying to preview the pdf from this link https://xamber.s3.amazonaws.com/Result.pdf but it's not working?

Error while reading the pages

Describe the bug
When clicking through the pdf pages (next and previous buttons) it sometimes shows an error 'Error while reading the pages'.

Error in console shows

"Cannot update during an existing state transition (such as within render). Render methods should be a pure function of props and state."

Expected behavior

• When navigating PDF pages, should wait till it renders the next page OR
• Should have a prop type for 'Loading complete' which user can track and implement the logic accordingly

Screenshots

PDF File
https://arxiv.org/pdf/quant-ph/0410100.pdf

Details (please complete the following information):

• Device: Desktop
• OS: OSX, Catalina
• Browser Chrome, Brave
• Version [e.g. 22]

Additional context
Add any other context about the problem here.

Add withCredentials option to support cookies

pdfjs already supports withCredentials flag, so that the browser sends cookies when loading a pdf via url.

How install peer dependency

This note

Due to causing broken css issue bulma, bulma-helpers & material-design-icons are removed from dependencies and added as peerDependencies
Please install bulma, bulma-helpers & material-design-icons from npm by yourself or provide custom css as per your requirement

The readme contains this note but does not teach how to deal with it

Should I just give npm install on these packages?

because when I install the package in my project I receive the following warnings

./node_modules/pdf-viewer-reactjs/dist/pdf-viewer-reactjs.js
Module not found: Can't resolve 'bulma-helpers/css/bulma-helpers.min.css' in '/home/lucas/source/front-gabaricev/node_modules/pdf-viewer-reactjs/dist'

./node_modules/pdf-viewer-reactjs/dist/pdf-viewer-reactjs.js
Module not found: Can't resolve 'bulma/css/bulma.css' in '/home/lucas/source/front-gabaricev/node_modules/pdf-viewer-reactjs/dist'

./node_modules/pdf-viewer-reactjs/dist/pdf-viewer-reactjs.js
Module not found: Can't resolve 'material-design-icons/iconfont/material-icons.css' in '/home/lucas/source/front-gabaricev/node_modules/pdf-viewer-reactjs/dist'

I think that if i run npm install dont resolve this warning. Because the folders of modules in node_modules/pdf-viewer-reactjs

Problem due to setState

I was using pdf-viewer-reactjs to load a pdf in my react app. When I'm not using setState in componentDidMount, the pdf viewer works fine. However, when I use the setState, it displays "Error loading pages." Basically, an error is caused when I re-render the page. Any idea how I can work around this problem?

Error

Im gettins this error,

./node_modules/pdfjs-dist/build/pdf.js Critical dependency: require function is used in a way in which dependencies cannot be statically extracted

Can you help me to correct this issue?

after importing PDFViewer project stop compiling..

Is there a way to shrink the report 'frame'?

in all the examples the report is super wide and on a phone it is wider than the phone. Styling seems to have no effect on shrinking the viewer.. Is there a way to make the viewer fit the container?

Add the ability to modify the style and position for the thumbnail container

Is your feature request related to a problem? Please describe.
I need to change the styling for the container - in particular the background color.

Describe the solution you'd like
You've helpfully provided the ability to get to the viewer wrapper, canvas wrapper and to either style or override the navigation controls (nice work on the latter btw). I'd like two more properties thumbnailCss and thumbnailsOnTop that work like canvasCss and navbarOnTop respectively

Describe alternatives you've considered
Looking at the code I can't see a way to easily get to these containers to modify them without hacking at it.

Additional context
Shouldn't need anything - it's a fairly simple request in concept.

Total page count

Hi @ansu5555 @ansuman5555
Am trying to customize the pdf viewer. How will i get the total number of pages on document load.
Thanks
Anson

How to access pdf file with token authentication?

Same the title.

Thanks

Unable to load file from URL due to CORS issue,

When loading from URL it fails to due to missing CORS headers

Error Compiling

Each time i add your Component to my react-app i got a compiling error...

<--- Last few GCs --->

[13048:000001BD16F70C40] 108875 ms: Scavenge 2035.9 (2050.6) -> 2035.2 (2050.8) MB, 7.1 / 0.0 ms (average mu = 0.063, current mu = 0.000) allocation failure
[13048:000001BD16F70C40] 111455 ms: Mark-sweep 2036.5 (2051.1) -> 2034.4 (2051.1) MB, 2579.0 / 0.1 ms (average mu = 0.048, current mu = 0.025) allocation failure scavenge might not succeed

<--- JS stacktrace --->

==== JS stack trace =========================================

0: ExitFrame [pc: 00007FF723BB2A5D]

Security context: 0x0171417408a1
1: SourceMapConsumer_allGeneratedPositionsFor [000001F3D23145B1] [C:\Users\JoseDM\sim-frontend\node_modules@babel\core\node_modules\source-map\lib\source-map-consumer.js:~178] [pc=000002CBB974D24D](this=0x00f7f1b80219 ,0x01d3abd3e979 )
2: /* anonymous /(aka / anonymous...

FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory

Writing Node.js report to file: report.20191217.140536.13048.0.001.json
Node.js report completed
1: 00007FF722FE076F napi_wrap+124431
2: 00007FF722F824B6 public: bool __cdecl v8::base::CPU::has_sse(void)const __ptr64+34502
3: 00007FF722F83176 public: bool __cdecl v8::base::CPU::has_sse(void)const __ptr64+37766
4: 00007FF723786D3E private: void __cdecl v8::Isolate::ReportExternalAllocationLimitReached(void) __ptr64+94
5: 00007FF72376ED81 public: class v8::SharedArrayBuffer::Contents __cdecl v8::SharedArrayBuffer::Externalize(void) __ptr64+833
6: 00007FF72363C64C public: static void __cdecl v8::internal::Heap::EphemeronKeyWriteBarrierFromCode(unsigned __int64,unsigned __int64,class v8::internal::Isolate * __ptr64)+1436
7: 00007FF7236479F0 public: void __cdecl v8::internal::Heap::ProtectUnprotectedMemoryChunks(void) __ptr64+1312
8: 00007FF723644524 public: static bool __cdecl v8::internal::Heap::PageFlagsAreConsistent(class v8::internal::HeapObject)+3204
9: 00007FF723639DB3 public: bool __cdecl v8::internal::Heap::CollectGarbage(enum v8::internal::AllocationSpace,enum v8::internal::GarbageCollectionReason,enum v8::GCCallbackFlags) __ptr64+1283
10: 00007FF723638584 public: void __cdecl v8::internal::Heap::AddRetainedMap(class v8::internal::Handle) __ptr64+2356
11: 00007FF723659855 public: class v8::internal::Handle __cdecl v8::internal::Factory::NewFillerObject(int,bool,enum v8::internal::AllocationType) __ptr64+53
12: 00007FF7233C6029 ??4iterator@JumpTableTargetOffsets@interpreter@internal@v8@@QEAAAEAV01234@$$QEAV01234@@z+4057
13: 00007FF723BB2A5D public: virtual bool __cdecl v8::internal::SetupIsolateDelegate::SetupHeap(class v8::internal::Heap * __ptr64) __ptr64+567949
14: 000002CBB974D24D
npm ERR! code ELIFECYCLE
npm ERR! errno 134
npm ERR! [email protected] start: react-scripts start
npm ERR! Exit status 134
npm ERR!
npm ERR! Failed at the [email protected] start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\JoseDM\AppData\Roaming\npm-cache_logs\2019-12-17T19_05_37_011Z-debug.log

Can you help me?

Render all pages instead of a single page

Hi,
I was able to render and restyle the viewer but for a single page. My issue is how can i render all the pages for now only One page is render and the next page only comes after the navigation buttons are pressed. Is there any prop like showAllPages which will render all pages and we can change the pages while scrolling up and down. If there is none can you guide me in right direction.
Thanks

Is there a more responsive CSS for mobile? the nav buttons and width get all fouled

Pass URL from JSON Output

Hi,

I'm trying to pass URL from JSON output (using Fetch - ReactJS) and it's not rendering the PDF file (the same file works if I directly place the link in quotes)

Direct Input works:
<PDFViewer document={{ url: "TestDoc.pdf"}}/>

Doesn't work:
var link = this.state.docs.document_url;
<PDFViewer document={{ url: link }} />

Even with quotes escaping it doesn't work.
var link = this.state.docs.document_url;
link = """+link+ """
<PDFViewer document={{ url: link }} />

Error in console:
Warning: Ignoring invalid character "33" in hex string
2pdf.worker.js:2023 Warning: Ignoring invalid character "45" in hex string
pdf.worker.js:2023 Warning: Ignoring invalid character "47" in hex string
pdf.worker.js:2023 Warning: Ignoring invalid character "42" in hex string
pdf.worker.js:2023 Warning: Ignoring invalid character "33" in hex string
57pdf.worker.js:2023 Warning: Ignoring invalid character "61" in hex

Please help!!

if I don't initialize the document the first time it gives the error 'error while reading pages'

i have a problem when charging PDF from base64 when i entry in to the applicattion the base64 Content is null an then when the user click botton the pdf is charged and loaded the content in the but the first time gives the error 'erro while reading pages'

my code is:

  <PDFViewer
      canvasCss={"miClase"}    
      hideNavbar={true}
      document={{
        base64: fichero,
      }}
    /

and my temporally solution is:

    <PDFViewer
      canvasCss={"miClase"}    
      hideNavbar={true}
      document={{
        base64: fichero===""?Sources.base64:fichero,
      }}
    />    

Do you have any idea why this is happening?

thank you

Add typings

Add typings for use with Typescript please,
Thanks

Colours dont stay true

This doesnt stay true to colour. Images can become washed out.
It seems to strip off ICC colour profiles from the pdf and/or from images within the pdf

Tested on lots of pdfs.

Is there anyway to keep these?

npm install pdf-viewer-reactjs neither yarn add pdf-viewer-reactjs working

Zoom Out button is enabled when using scale prop

Change PDF url

I am looking to implement a Pdf container, where users will click on the Pdf file and see it in Modal or Dialog.

In the example to use, when I change the Pdf link it gives an error and does not read any Pdf file other than the example.

I hope I explained it correctly

Feature set width 100%

How to adjust the pdf to fit 100% width? It works perfectly on browser but on mobile doesnt

pdf-viewer interferes with my app's CSS

@ansu5555 @ansuman5555

We really want to use this pdf viewer but it is interfering with our app's internal css.

We have quite a big application with moving parts and in it's current state I cannot use this package because it interferes with our entire app's css.

Please can you tell me how I can use this without it causing this behaviour.

Error while reading the pages ![BUG]

hi . i install this package when use it in my project , it display " Error while reading the pages ! " . please help mi to fix it

I use Material UI react and get an error

./node_modules/material-design-icons/iconfont/material-icons.css
ModuleParseError: Module parse failed: Unexpected character '' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
(Source code omitted for this binary file)

I get the error when I load the page

import React, { useState } from 'react'
// import {Document, Page} from "react-pdf";
import PDFViewer from "pdf-viewer-reactjs"


export default function PDF() {
    return (
        <PDFViewer
            document="/doctor.pdf"
        />
    )
}

CSS Caching

Hi there, so with installed bulma, bulma-heleprs and icons, after visiting page where I am using your library to display PDF, styling in entire application is messed up, so is there a way to prevent that by either not using that at all and providing my own style to PDFViewer component or some other solution you are suggesting?

Distorts CSS when using semantic ui react.

After installing and importing the PDFViewer component in the application, most of the semantic ui react css is lost, works fine when the import is removed.

Shows the buttons without styling

Hi,

I applied the library in my project, wich is an app made with Electron and ReactJS and everything works fine, but, I don't know if I have to configure another property, but, I tried to implement the navbar on top and it's working but the buttons, like zoom in, zoom out, rotation, etc it's shows without styling:

I saw the example and my implementation is equal, I don't know why the buttons shows like the image that I attached.

I don't know if is an issue or I have to add other property, you can find my implementation in the following image:

I will be waiting for your response.

Thanks in advance.
Best regards

Show only one portion of a pdf with zoom

Hi
I would like to only show a specific area of the pdf page (I have the x,y and width and height) and zoom in if necessary

Error while reading the pages ! TypeError: "canvas is null"

HI @ansu5555 @ansuman5555

This error is happening inconsistently:

Error while reading the pages !
TypeError: "canvas is null"

I'm loading from a URL. If I copy paste that URL in the browser then it opens the pdf properly.

What could the possible reasons be for this ?

PDF file preview not working with Internet Download Manager Tools in Chrome

Unhandled Rejection (UnknownErrorException): Failed to fetch
▶ 12 stack frames were collapsed.

Chrome extension:

I understand that you are not to blame for this. Can you solve this problem?

When I use the component all my <p> are modifieds.....adding extra margin

Hi when i import the pdfViewer all paragraph in mi site gain a 1rem in margin bottom

encoded faild with cyrillic symbols

Screenshot with problem
On the left, the PDF is displayed in a new window of the electron, on the right, the PDF is inside the program.

Instead of symbols there are squares)

Pdf view not displaying for base64 data

I installed this library to view uploaded pdf. I m converting the uploaded file as base 64.

I m converting pdf to Base 64 as follows:
var selectedFile = document.getElementById("inputFile").files;
//Check File is not Empty
if (selectedFile.length > 0) {
// Select the very first file from list
var fileToLoad = selectedFile[0];
// FileReader function for read the file.
var fileReader = new FileReader();
var base64;
// Onload of file read the file content
fileReader.onload = function(fileLoadedEvent) {
base64 = fileLoadedEvent.target.result;
// Print data in console
console.log(base64);
};
// Convert data to base64
fileReader.readAsDataURL(fileToLoad);
}

i m giving the base64 value to view the pdf. But i m getting the following error in console
Failed to execute 'atob' on 'Window': The string to be decoded is not correctly encoded

How does the error handling works?

Hey @ansu5555 🤓 ✌️

I noticed there is no error handling on the dependency
I've tried to use the PDFViewer component but I'm passing a URL (like /my/file/pdf) on the 'url' property, this url provides a pdf document itself on the request but if the request response an error, my app crashes due to the PDFViewer lacks of onErrorhandler method.

Do you have any idea how could I handle the error?

Add font change feature in watermark

Could you please add in your ./components/RenderPdf file one more field in watermark - font, to give us possibility change Comic Sans MS to something else?

Change page by input field

Good day.
I cant understand why you dant pass callback function in navigation for page change from input field or something...? its really usefull, but I need to wrote bad code, cus we send in navigation String exept of Component with props...