How to load pdf files from url using react-pdf-viewer or some other library with search button?

Question

I am trying to load pdf from url using react-pdf-viewer library. I need a search button therefore I use this library. Is it possible to load pdf from url in this library? Or should I use any other library?

My current implementation is

const pdfFile = require("../assets/pdf/mypdf.pdf");

return (
        <Worker workerUrl="https://unpkg.com/[email protected]/build/pdf.worker.min.js">
          <div style={{ height: "720px", marginTop: "120px" }}>
            <Viewer fileUrl={pdfFile} plugins={[defaultLayoutPluginInstance]} />
          </div>
        </Worker>
      );

Answer 1

Most react react-pdf-viewer libraries like this syncfusion one according to its demo is a hybrid where search can be at two levels both internal and external, here we can see the two text layers subject to a search and the result by search in the browser.

You specify one that appears to be similar based on PDF.js which should have an internal spyglass https://codesandbox.io/s/react-pdf-viewer-sample-yc8ut?file=/public/pdf-open-parameters.pdf

So most react js based libraries should offer one or the other, if not both. (but beware it's not always the real pdf which is in the back end)

Here is a windows binary PDF client viewer with same URL