pdfslick
pdfslick copied to clipboard
Update version 2.3.0 -> 3.0.0 null is not a constructor
My component: `
interface SharedPDFViewerProps {
pdfUrl: string;
customFileName?: string;
onDownloadClick?: () => void;
}
const SharedPDFViewer: React.FC<SharedPDFViewerProps> = ({
pdfUrl,
customFileName = 'document.pdf',
onDownloadClick
}) => {
const { viewerRef, usePDFSlickStore, PDFSlickViewer } = usePDFSlick(pdfUrl, {
singlePageViewer: true,
filename: customFileName,
scaleValue: 'page-fit'
});
const pdfSlick = usePDFSlickStore(s => s.pdfSlick);
const scale = usePDFSlickStore(s => s.scale);
return (
<div className='flex flex-1 flex-col inset-0 h-full bg-slate-200/40 pdfSlick items-center'>
<div className='flex-1 relative w-full'>
<PDFSlickViewer {...{ viewerRef, usePDFSlickStore }} />
</div>
<div className={'flex flex-row p-4'}>
<button
disabled={!pdfSlick || scale <= 0.25}
onClick={() => pdfSlick?.viewer?.decreaseScale()}
type='button'
className='relative inline-flex items-center px-2 py-2 text-slate-500 ring-0 ring-inset ring-slate-700 hover:bg-slate-50 enabled:hover:text-slate-900 transition-all focus:z-10 pointer-events-auto disabled:opacity-70'
>
<span className='sr-only'>Zoom Out</span>
<svg
xmlns='http://www.w3.org/2000/svg'
viewBox='0 0 24 24'
width='24px'
height='24px'
>
<path
fill='currentColor'
d='M15.5 14h-.79l-.28-.27A6.47 6.47 0 0 0 16 9.5A6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5S14 7.01 14 9.5S11.99 14 9.5 14M7 9h5v1H7z'
></path>
</svg>
</button>
<button
disabled={!pdfSlick || scale >= 5}
onClick={() => pdfSlick?.viewer?.increaseScale()}
type='button'
className='relative inline-flex items-center px-2 py-2 text-slate-500 ring-0 ring-inset ring-slate-700 hover:bg-slate-50 enabled:hover:text-slate-900 transition-all focus:z-10 pointer-events-auto disabled:opacity-70'
>
<span className='sr-only'>Zoom In</span>
<svg
xmlns='http://www.w3.org/2000/svg'
viewBox='0 0 24 24'
width='24px'
height='24px'
>
<path
fill='currentColor'
d='M15.5 14h-.79l-.28-.27A6.47 6.47 0 0 0 16 9.5A6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5S14 7.01 14 9.5S11.99 14 9.5 14'
></path>
<path fill='currentColor' d='M12 10h-2v2H9v-2H7V9h2V7h1v2h2z'></path>
</svg>
</button>
{!!onDownloadClick && (
<div>
<button
onClick={onDownloadClick}
type='button'
className='relative inline-flex items-center px-2 py-2 text-slate-500 ring-0 ring-inset ring-slate-700 hover:bg-slate-50 enabled:hover:text-slate-900 transition-all focus:z-10 pointer-events-auto disabled:opacity-70'
>
<span className='sr-only'>Download</span>
<DocumentDownload />
</button>
</div>
)}
</div>
</div>
);
};
export default SharedPDFViewer; `
PDFSlick v3 uses latest pdf.js version, so make sure you have it installed. Try removing your projects node_modules and package-lock.json and then running npm install, should ensure proper versions.
in localhost is fine, but when deploy on vercel, is a crash @van100j