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