This repository contains the sources of all React PDF Viewer examples.
These examples work with
@react-pdf-viewer
3.11.0pdfjs-dist
3.2.146
React PDF viewer examples
Home Page: https://react-pdf-viewer.dev/examples
This repository contains the sources of all React PDF Viewer examples.
These examples work with
@react-pdf-viewer
3.11.0pdfjs-dist
3.2.146Hi,
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
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>````
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
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.
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.
examples/print/PrintButtonExample.tsx /
dont work
message:
Setting up fake worker failed: "Cannot read property 'WorkerMessageHandler' of undefined".
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
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"
}
}
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.
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?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.