Created
January 27, 2021 04:46
-
-
Save simbathesailor/9abf373bf9a3c985c10c0aea340347d9 to your computer and use it in GitHub Desktop.
PdfPreviewboilerplate.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment