PdfPreviewboilerplate.js

PdfPreviewboilerplate.js

function PdfPreview(props) {
  const { docUrl, uniqueContainerId = "pdf-preview", styles } = props;

  useEffect(() => {
    // Plain javascript mozilla pdf.js initialization code can be placed here
  }, [docUrl]);
  return (
    <PDFViewCustomContainer
      styles={styles}
      uniqueContainerId={uniqueContainerId}
      id={`preview-container-${
        uniqueContainerId ? `${uniqueContainerId}` : ""
      }`}
    >
      {/* {!loaded && <Loader dark />} */}
      <header>
        <h1 id={`title-${uniqueContainerId}`} />
      </header>
      <div id={`viewerContainer-${uniqueContainerId}`}>
        <div id="viewer" className="pdfViewer" />
      </div>
      <div id={`loadingBar-${uniqueContainerId}`}>
        <div className="progress" />
        <div className="glimmer" />
      </div>
      <div id={`errorWrapper-${uniqueContainerId}`} hidden="true">
        <div id={`errorMessageLeft-${uniqueContainerId}`}>
          <span id={`errorMessage-${uniqueContainerId}`} />
          <button id={`errorShowMore-${uniqueContainerId}`}>
            More Information
          </button>
          <button id={`errorShowLess-${uniqueContainerId}`}>
            Less Information
          </button>
        </div>
        <div id={`errorMessageRight-${uniqueContainerId}`}>
          <button id={`errorClose-${uniqueContainerId}`}>Close</button>
        </div>
        <div className="clearBoth" />
        <textarea
          id={`errorMoreInfo-${uniqueContainerId}`}
          hidden="true"
          readOnly="readonly"
          defaultValue={""}
        />
      </div>
      <footer>
        <button
          className="toolbarButton pageUp"
          title="Previous Page"
          id={`previous-${uniqueContainerId}`}
        />
        <button
          className="toolbarButton pageDown"
          title="Next Page"
          id={`next-${uniqueContainerId}`}
        />
        <input
          type="number"
          id={`pageNumber-${uniqueContainerId}`}
          className="toolbarField pageNumber"
          defaultValue={1}
          size={4}
          min={1}
        />
        <button
          className="toolbarButton zoomOut"
          title="Zoom Out"
          id={`zoomOut-${uniqueContainerId}`}
        />
        <button
          className="toolbarButton zoomIn"
          title="Zoom In"
          id={`zoomIn-${uniqueContainerId}`}
        />
      </footer>
    </PDFViewCustomContainer>
  );
}

export default PdfPreview;