title: Full-fledged PDF.js viewer in React
body: <p>I'm looking to use the full-featured <a href="https://github.com/mozilla/pdf.js" rel="noreferrer">PDF.js</a> in a React component in a <a href="https://nextjs.org/" rel="noreferrer">Next.js</a> project, as seen in Firefox and as on <a href="https://mozilla.github.io/pdf.js/web/viewer.html" rel="noreferrer">this online demo</a>. Some important features here are being able to navigate to a certain page number by typing it in, and searching for text in the PDF. Is there a React component available for that?</p>
  
  <p>The library <a href="https://github.com/wojtekmaj/react-pdf/" rel="noreferrer">react-pdf</a> is nice for rendering a single page, but doesn't provide a toolbar or a convenient way of lazily loading pages in a scrollable view.</p>
  
  <p>Similar to the questions <a href="https://stackoverflow.com/questions/51553049/how-to-use-full-pdf-js-viewer-with-toolbar-in-webpack-and-vuejs">How to use full PDF.js viewer with toolbar in webpack and Vuejs?</a> (where the accepted answer provides a Vue component) and <a href="https://stackoverflow.com/questions/53757509/embed-full-mozilla-pdf-js-viewer-in-vue-js-using-webpack-via-vue-cli">Embed Full Mozilla pdf.js viewer in vue.js ( using webpack via vue-cli )</a>, but for React.js.</p>
  
  <p>I tried including including /web/viewer.html as part of the inner HTML of a React component by doing the following, but it didn't work out.</p>
  
  <ol>
  <li>Download the <a href="https://github.com/mozilla/pdf.js/releases/tag/v2.3.200" rel="noreferrer">latest release</a> and extract it to a folder part of my Next.js project (which I called <code>pdfjs</code>). I tried several folders, such as /client, /client/components, /pages, /node_modules, and /.</li>
  <li>Run <code>npm install --save-dev html-loader</code></li>
  <li>Use this Webpack loader that parses HTML files, by changing <code>next.config.js</code> to the following:</li>
  </ol>
  
  <pre class="lang-js prettyprint-override"><code>module.exports = {
    // …
    webpack: (config, options) =&gt; {
      config.module.rules.push({
        test: /\.html$/,
        exclude: /node_modules/,
        use: { loader: 'html-loader' }
      });
      return config;
    },
  }
  </code></pre>
  
  <ol start="4">
  <li>Create a simple page under /pages as follows:</li>
  </ol>
  
  <pre><code>import React from 'react';
  import PdfViewer from '../pdfjs/web/viewer.html'
  
  export default function () {
    return (
      &lt;div className="content" dangerouslySetInnerHTML={{ __html: PdfViewer }} /&gt;
    );
  };
  </code></pre>
  
  <ol start="5">
  <li>After running <code>next</code> in terminal to start a dev server and navigating to that page in the browser, I get an error about the JavaScript heap running out of memory.</li>
  </ol>
  
  <p>Even if my computer had enough memory, I'm not sure that this would actually result in the PDF rendering – not to mention the danger of using <code>dangerouslySetInnerHTML</code>. It looks like a better solution would probably be to have an actual React component rather than trying to embed an HTML file.</p>