A react example?

[justpankajdotcom]

Hi @Laomai-codefee ,

I am having some trouble integrating the library(not the build) as a react component. My use case require me to push annotations to the backend, and then retrieve them back and display over the pdf. I can take care of the part to push to the backend, but can you help me how to incorporate the source directly as a react component to read and display the PDF? Thanks.

[Laomai-codefee]

Have you already converted the code into a React component?

[justpankajdotcom]

@Laomai-codefee Hi, this is how I am using right now.

I am making changes to your source code to suit my requirements like styling comment section, buttons etc. Then I am building the source code using npm run build. Then I am putting the compiled library along with viewer.html etc inside the script folder under /public, and then finally I am using it like this

<iframe
              ref={iframeRef}
              src={`/pdfjs/web/viewer.html?file=${encodeURIComponent(pdfBlobUrl)}#ae_username=myusername`}
              title="PDF Viewer"
              width="100%"
              height="100%"
              style={{ border: "none" }}
            />

When I need to trigger something, I use windows.postMessage api.

I was wondering if there's any way I can use the source code directly(src) , like a react component to achieve same thing? Sorry if this is a naive question, my understanding is bit weak on this subject.

[Laomai-codefee]

@justpankajdotcom
You can use a React component to achieve the same effect, but you would need to write the rendering layer yourself, which is the so-called viewer. You can refer to this project: https://github.com/agentcooper/react-pdf-highlighter

I think implementing the viewer yourself is too difficult, so I chose to extend on top of PDF.js. If you need to read data inside the plugin, you can do so by adding URL parameters, just like ae_username=myusername.