react-pdf-viewer/examples

React PDF viewer examples

React PDF Viewer examples

This repository contains the sources of all React PDF Viewer examples.

These examples work with

• @react-pdf-viewer 3.11.0
• pdfjs-dist 3.2.146

examples's Issues

Auto Play Feature

below is my code , i want to achive auto play feature like slider auto play , how can I do it ? is it already there?
thanks in advance

<Document file={selectedFile} onLoadSuccess={onDocumentLoadSuccess}>
              <Page
                pageNumber={pageNumber}
                renderTextLayer={false}
                renderAnnotationLayer={false}
                width={250}
                className="custom-page"
              />
            </Document>
          )}
        </Box>
      )}
      {selectedFile && !selectedFile.type.startsWith("image/") && (
        <Stack sx={{ pt: 2 }} direction="row" gap={2} alignItems={"center"}>
          <IconButton
            color="primary"
            onClick={() => {
              if (pageNumber > 1) {
                setPageNumber(pageNumber - 1);
              }
            }}
            disabled={pageNumber === 1}
          >
            <ArrowBackIosIcon />
          </IconButton>
          {pageNumber} of {numPages}
          <IconButton
            color="primary"
            onClick={() => {
              if (numPages && pageNumber < numPages) {
                setPageNumber(pageNumber + 1);
              }
            }}
            disabled={pageNumber === numPages}
          >
            <ArrowForwardIosIcon />
          </IconButton>
        </Stack>````

Extract ALL text content from the PDF.

I need to extract all the text content from a PDF as soon as it's loaded. I can't find the text value in the onDocumentLoad props and using renderPage renderPageProps.textLayerRendered only gives the text content for the currently scrolling page. I need ALL the text found in the PDF as soon as it is available. Thank you.

Highlighting seems to work only every second try

Hi, first: great work with your product. It's fantastic.
Just a small question:
When trying out the sample for the hightlight plugin (https://react-pdf-viewer.dev/plugins/highlight/) , I realised that it only triggers every second time.
Is this on purpose (if yes: why) or is this a bug? (I attached a gif that shows what I mean).

Would it be possible to let it trigger every time?

Search isn't working

I'm using the updated package and wanted to implement searching functionality and I'm gating an error like TypeError: Cannot read properties of undefined (reading 'map')
at search.js:151:1 when submitting enter button for searching.

Custom render custom renderProgressBar code not working

The renderProgressBar code example that you provide, does not overwrite the default progress bar. Could you pleasse provide a working example. We need to translate the language for our customers.

page going blank on scrolling

Hi,
I am using the version latest version of the thumbnail and the page is breaking while scrolling and giving me this error-

var pageRotation = pagesRotation.has(pageIndex) ? pagesRotation.get(pageIndex) : 0;

Adding react-pdf-viewer to Remix crashes entire site

Not quite sure how to best outline the error, but trying to add React PDF Viewer to my Remix(React) site crashes the whole site with these errors:

Uncaught SyntaxError: Identifier 'React' has already been declared
components.js:181 Uncaught TypeError: Cannot read properties of undefined (reading 'root')
    at RemixRoute (components.js:181)
    at renderWithHooks (react-dom.development.js:14985)
    at mountIndeterminateComponent (react-dom.development.js:17811)
    at beginWork (react-dom.development.js:19049)
    at HTMLUnknownElement.callCallback2 (react-dom.development.js:3945)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:3994)
    at invokeGuardedCallback (react-dom.development.js:4056)
    at beginWork$1 (react-dom.development.js:23964)
    at performUnitOfWork (react-dom.development.js:22776)
    at workLoopSync (react-dom.development.js:22707)
RemixRoute @ components.js:181
renderWithHooks @ react-dom.development.js:14985
mountIndeterminateComponent @ react-dom.development.js:17811
beginWork @ react-dom.development.js:19049
callCallback2 @ react-dom.development.js:3945
invokeGuardedCallbackDev @ react-dom.development.js:3994
invokeGuardedCallback @ react-dom.development.js:4056
beginWork$1 @ react-dom.development.js:23964
performUnitOfWork @ react-dom.development.js:22776
workLoopSync @ react-dom.development.js:22707
renderRootSync @ react-dom.development.js:22670
performSyncWorkOnRoot @ react-dom.development.js:22293
scheduleUpdateOnFiber @ react-dom.development.js:21881
updateContainer @ react-dom.development.js:25482
(anonymous) @ react-dom.development.js:26021
unbatchedUpdates @ react-dom.development.js:22431
legacyRenderSubtreeIntoContainer @ react-dom.development.js:26020
hydrate @ react-dom.development.js:26086
(anonymous) @ entry.client.tsx:5
react-dom.development.js:20085 The above error occurred in the <RemixRoute> component:

    at RemixRoute (http://localhost:3000/build/_shared/chunk-IBHUES74.js:1532:3)
    at Routes (http://localhost:3000/build/_shared/chunk-IBHUES74.js:1515:7)
    at Router (http://localhost:3000/build/_shared/chunk-SDM3QH37.js:456:21)
    at RemixCatchBoundary (http://localhost:3000/build/_shared/chunk-IBHUES74.js:103:10)
    at RemixErrorBoundary (http://localhost:3000/build/_shared/chunk-IBHUES74.js:45:5)
    at RemixEntry (http://localhost:3000/build/_shared/chunk-IBHUES74.js:1412:12)
    at RemixBrowser (http://localhost:3000/build/_shared/chunk-IBHUES74.js:2013:42)

React will try to recreate this component tree from scratch using the error boundary you provided, RemixErrorBoundary.
logCapturedError @ react-dom.development.js:20085
update.payload @ react-dom.development.js:20133
getStateFromUpdate @ react-dom.development.js:12102
processUpdateQueue @ react-dom.development.js:12250
resumeMountClassInstance @ react-dom.development.js:12921
updateClassComponent @ react-dom.development.js:17430
beginWork @ react-dom.development.js:19073
beginWork$1 @ react-dom.development.js:23940
performUnitOfWork @ react-dom.development.js:22776
workLoopSync @ react-dom.development.js:22707
renderRootSync @ react-dom.development.js:22670
performSyncWorkOnRoot @ react-dom.development.js:22293
scheduleUpdateOnFiber @ react-dom.development.js:21881
updateContainer @ react-dom.development.js:25482
(anonymous) @ react-dom.development.js:26021
unbatchedUpdates @ react-dom.development.js:22431
legacyRenderSubtreeIntoContainer @ react-dom.development.js:26020
hydrate @ react-dom.development.js:26086
(anonymous) @ entry.client.tsx:5
errorBoundaries.js:66 TypeError: Cannot read properties of undefined (reading 'root')
    at RemixRoute (components.js:181)
    at renderWithHooks (react-dom.development.js:14985)
    at mountIndeterminateComponent (react-dom.development.js:17811)
    at beginWork (react-dom.development.js:19049)
    at HTMLUnknownElement.callCallback2 (react-dom.development.js:3945)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:3994)
    at invokeGuardedCallback (react-dom.development.js:4056)
    at beginWork$1 (react-dom.development.js:23964)
    at performUnitOfWork (react-dom.development.js:22776)
    at workLoopSync (react-dom.development.js:22707)
RemixRootDefaultErrorBoundary @ errorBoundaries.js:66
renderWithHooks @ react-dom.development.js:14985
mountIndeterminateComponent @ react-dom.development.js:17811
beginWork @ react-dom.development.js:19049
beginWork$1 @ react-dom.development.js:23940
performUnitOfWork @ react-dom.development.js:22776
workLoopSync @ react-dom.development.js:22707
renderRootSync @ react-dom.development.js:22670
performSyncWorkOnRoot @ react-dom.development.js:22293
scheduleUpdateOnFiber @ react-dom.development.js:21881
updateContainer @ react-dom.development.js:25482
(anonymous) @ react-dom.development.js:26021
unbatchedUpdates @ react-dom.development.js:22431
legacyRenderSubtreeIntoContainer @ react-dom.development.js:26020
hydrate @ react-dom.development.js:26086
(anonymous) @ entry.client.tsx:5
react-dom.development.js:67 Warning: Expected server HTML to contain a matching <title> in <head>.
    at title
    at head
    at html
    at RemixRootDefaultErrorBoundary (http://localhost:3000/build/_shared/chunk-IBHUES74.js:76:3)
    at RemixErrorBoundary (http://localhost:3000/build/_shared/chunk-IBHUES74.js:45:5)
    at RemixEntry (http://localhost:3000/build/_shared/chunk-IBHUES74.js:1412:12)
    at RemixBrowser (http://localhost:3000/build/_shared/chunk-IBHUES74.js:2013:42)

It's a bit of a longshot, but do you have any ideas as to how to fix these? It seems to happen immediately after I try to load a Viewer or Worker in a Component. The first error occurs because heroicons already imports React, but beyond that I can't say how to fix it or identify the issue

Feature Request - Highlight plugin accept ReactElement

Hi,

First of all, product is great and we've bought a license. We're now adding the ability for users to be able to add comments/notes with the HighlightPlugin. It would be great if the render... fields we pass to the highlightPlugin accepted ReactElements instead of a function that returns ReactElement as this would allow us to use hooks and what not in these elements.

I currently get this error trying to use hooks in these functions:

Cheers,
Leo

Jump between pages not working

Issue:

This is an example from the docs. I can't get the "jump to page" motion to work. The user should be able to type in a page number (e.g. 7/30) and then the pdf viewer should jump to that page. That is not working.

I have created a simple dummy repo to reproduce the issue: https://github.com/JanRuettinger/react_pdf_viewer_error/tree/main

package.json

{
  "name": "react_pdf_viewer_test",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@react-pdf-viewer/core": "3.12.0",
    "@react-pdf-viewer/default-layout": "^3.12.0",
    "@react-pdf-viewer/page-navigation": "^3.12.0",
    "@react-pdf-viewer/selection-mode": "^3.12.0",
    "@react-pdf-viewer/toolbar": "^3.12.0",
    "@types/node": "20.6.0",
    "@types/react": "18.2.21",
    "@types/react-dom": "18.2.7",
    "autoprefixer": "10.4.15",
    "eslint": "8.49.0",
    "eslint-config-next": "13.4.19",
    "next": "13.4.19",
    "pdfjs-dist": "3.4.120",
    "postcss": "8.4.29",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "tailwindcss": "3.3.3",
    "typescript": "5.2.2"
  }
}

LocalizationProvider in Viewer localization = undefined

Hi,

I am currently trying to implement the German version. I want to do it with defaultLayout. In react-dev-tools, Component Provider "LocalizationProvider" has correct props, but in "Viewer" "LocalizationProvider" is undefined.
btw i have translated the local json to german. You are welcome to use it, possibly also as part of the package.

Sandbox: https://codesandbox.io/s/pdf-default-4hr2z

best regards

dont work

examples/print/PrintButtonExample.tsx /
dont work
message:
Setting up fake worker failed: "Cannot read property 'WorkerMessageHandler' of undefined".