Issue with Creating a PDF Viewer Component in React using react-pdf

Question

I'm encountering a problem with my code while attempting to create a PDFViewer component in React (using TypeScript) with the react-pdf library. Despite my efforts, it seems to be failing, and I'm struggling to understand why. I've come across some solutions online, but they involve modifying the index.d.ts file, and I'm fairly certain there must be another solution available.

Here's my code:

import React, { useState } from "react";
import { Document, Page } from "@react-pdf/renderer";

const PDFViewer: React.FC = () => {
  const [numPages, setNumPages] = useState<number | null>(null);
  const [pageNumber, setPageNumber] = useState<number>(1);

  const onDocumentLoadSuccess = ({ numPages }: any) => {
    setNumPages(numPages);
  };

  return (
    <div>
      <Document
        file="https://www.cisco.com/c/fr_ca/support/docs/contact-center/remote-expert-mobile/214321-remote-expert-mobile-reset-web-gateway-a.pdf"
        onLoadSuccess={onDocumentLoadSuccess}
      >
        <Page pageNumber={pageNumber} />
      </Document>
      <p>
        Page {pageNumber} of {numPages}
      </p>
    </div>
  );
};

export default PDFViewer;

Here's the error:

No overload matches this call.
  Overload 1 of 2, '(props: PropsWithChildren<DocumentProps>): Document', gave the following error.
    Type '{ children: Element; file: string; onLoadSuccess: ({ numPages }: any) => void; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<Document> & Readonly<PropsWithChildren<DocumentProps>>'.
      Property 'file' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<Document> & Readonly<PropsWithChildren<DocumentProps>>'.
  Overload 2 of 2, '(props: PropsWithChildren<DocumentProps>, context: any): Document', gave the following error.
    Type '{ children: Element; file: string; onLoadSuccess: ({ numPages }: any) => void; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<Document> & Readonly<PropsWithChildren<DocumentProps>>'.
      Property 'file' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<Document> & Readonly<PropsWithChildren<DocumentProps>>'.ts(2769)

Berkay Kaplan · Accepted Answer · 2024-04-07 17:18:32Z

0

Your Document component from the @react-pdf/renderer library doesn't recognize the file prop. Try creating a new type definition for the Document component. Adding this code segment can help:

interface CustomDocumentProps extends DocumentProps {
  file: string;
}

And you might want to modify your Document tag to integrate your CustomDocumentProps:

Document<CustomDocumentProps>

answered Apr 7, 2024 at 17:18

Berkay Kaplan

4562 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Yasha_ops Over a year ago

I don't see how it solve's my problem ? Should i modify directly the library ?

Berkay Kaplan Over a year ago

I don't think you need to modify the library. We can use a workaround by creating a new type definition.

Miracle Agholor · Accepted Answer · 2024-04-07 17:34:33Z

0

The error you seem to be encountering might be related to Typescript, it maybe you're using typescript. The possibility of the error you are having, is that It's showing that the file prop you're passing to the Document component does not match the expected type.

Because it specifies Document-props as the error.

Possible solution to this may be to write it or import the code like this:

...

import React, { useState } from "react";
import { Document, Page, DocumentProps } from "@react-pdf/renderer";

const PDFViewer: React.FC = () => {
  const [numPages, setNumPages] = useState<number | null>(null);
  const [pageNumber, setPageNumber] = useState<number>(1);

  const onDocumentLoadSuccess = ({ numPages }: any) => {
    setNumPages(numPages);
  };

  return (
    <div>
      <Document
        file="https://www.cisco.com/c/fr_ca/support/docs/contact-center/remote-expert-mobile/214321-remote-expert-mobile-reset-web-gateway-a.pdf"
        onLoadSuccess={onDocumentLoadSuccess}
      >
        <Page pageNumber={pageNumber} />
      </Document>
      <p>
        Page {pageNumber} of {numPages}
      </p>
    </div>
  );
};

export default PDFViewer;

...

answered Apr 7, 2024 at 17:34

Miracle Agholor

12 bronze badges

1 Comment

Yasha_ops Over a year ago

It ain't working.I don't think you understood my question :(

Collectives™ on Stack Overflow

Issue with Creating a PDF Viewer Component in React using react-pdf

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related