Does react-pdf render PDF forms?

[wra1w0]

I want to ask if react-pdf does render PDF forms? If yes, what am I doing wrong, or how should I configure, for example, AnnotationLayer.css to have form fields displayed like in a standard PDF viewer with, for example, a blue background? Thank you for your help.

[joshgreco]

Yes, react-pdf can render forms.

The Page component accepts a renderForms prop. Pass it a true and make sure you're loading the styles from AnnotationLayer.css and you should be good to go.

The documentation states that in order for forms to be rendered, renderAnnotationLayer also needs to be true, but it is by default. As long as you aren't disabling it somewhere, it should just work.

Here's a rough example of how I'm doing it:

import {useState} from "react";
import {Document, Page} from 'react-pdf';

import 'react-pdf/dist/Page/TextLayer.css';
import 'react-pdf/dist/Page/AnnotationLayer.css';

const MyComponent = () => {
  const [pages, setPages] = useState([]);
  const [scale, setScale] = useState(1);
  const [rotation, setRotation] = useState(0);

  const onDocumentLoadSuccess = (pdfObject) => {
    setPages(Array.from({length: pdfObject.numPages}, (_, i) => i + 1));
  }

  return (
    <div className="MyComponent">
      <Document file="/path/to/some.pdf" onLoadSuccess={onDocumentLoadSuccess} rotation={rotation}>
        { pages.map(page => <Page key={page} pageNumber={page} renderForms={true} scale={scale} width={800} />) }
      </Document>
    </div>
  )
}

export default MyComponent;

[wra1w0]

Thank you for your help. Indeed, I didn't see this point in the documentation. Now it's working as expected.