Question 372111 in Reactjs Question posted in
The new location for the React Documentation can be found here.

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

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)
Tags:

2

Answers


  1. 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>
    Login or Signup to reply.
  2. 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;

    …

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search