Comments (6)
the issue is that the width
is sometimes undefined for some reason the fix is:
//PdfRenderer.tsx
const { width } = useResizeDetector({
targetRef: targetRef,
});``
<SimpleBar autoHide={false} className="max-h-[calc(100vh-10rem)]">
<div ref={targetRef}>
for some reason the useResizeDetector() loses track of the div that has the ref
from quill.
Thank you for the help. I am getting this error with that code
![image](https://private-user-images.githubusercontent.com/141846543/290545527-c55c7662-6b96-4d14-b0fb-59bd65a8790a.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MDYzODQ4NTAsIm5iZiI6MTcwNjM4NDU1MCwicGF0aCI6Ii8xNDE4NDY1NDMvMjkwNTQ1NTI3LWM1NWM3NjYyLTZiOTYtNGQxNC1iMGZiLTU5YmQ2NWE4NzkwYS5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwMTI3JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDEyN1QxOTQyMzBaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT0zYjIxMzE5OTg5YTg4Yjg4MDBlYzQwMzgwYjU5ZjAyNzJjYmJhMDJhMGI4ZWRmMjdlOTVjYzgxM2U5ZTkzOGM3JlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.7VFa7z38nRZ2g9TSk9KyS_vyXVvxndzKuwPqFw2EiHU)
from quill.
You have to define it #14 (comment)
from quill.
I am having 3 errors with that code:
- There is white space below the pdf.
- The full screen is glitching out.
- When I click to increase view to 250%, it also glitches out.
Screen.Recording.2023-12-18.at.3.22.01.PM.mp4
Code:
'use client'
import {
ChevronDown,
ChevronUp,
Loader2,
RotateCw,
Search,
} from 'lucide-react'
import { Document, Page, pdfjs } from 'react-pdf'
import 'react-pdf/dist/Page/AnnotationLayer.css'
import 'react-pdf/dist/Page/TextLayer.css'
import { useToast } from './ui/use-toast'
import React, { useRef } from 'react';
import { useResizeDetector } from 'react-resize-detector'
import { Button } from './ui/button'
import { Input } from './ui/input'
import { useState } from 'react'
import { useForm } from 'react-hook-form'
import { z } from 'zod'
import { zodResolver } from '@hookform/resolvers/zod'
import { cn } from '@/lib/utils'
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuTrigger,
} from './ui/dropdown-menu'
import SimpleBar from 'simplebar-react'
import PdfFullscreen from './PdfFullscreen'
pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`
interface PdfRendererProps {
url: string
}
const PdfRenderer = ({ url }: PdfRendererProps) => {
const { toast } = useToast()
const [numPages, setNumPages] = useState<number>()
const [currPage, setCurrPage] = useState<number>(1)
const [scale, setScale] = useState<number>(1)
const [rotation, setRotation] = useState<number>(0)
const [renderedScale, setRenderedScale] = useState<
number | null
>(null)
const pdfRef = useRef(null)
const { width } = useResizeDetector({
targetRef: pdfRef,
});
const isLoading = renderedScale !== scale
const CustomPageValidator = z.object({
page: z
.string()
.refine(
(num) => Number(num) > 0 && Number(num) <= numPages!
),
})
type TCustomPageValidator = z.infer<
typeof CustomPageValidator
>
const {
register,
handleSubmit,
formState: { errors },
setValue,
} = useForm<TCustomPageValidator>({
defaultValues: {
page: '1',
},
resolver: zodResolver(CustomPageValidator),
})
console.log(errors)
const handlePageSubmit = ({
page,
}: TCustomPageValidator) => {
setCurrPage(Number(page))
setValue('page', String(page))
}
return (
<div className='w-full bg-white rounded-md shadow flex flex-col items-center'>
<div className='h-14 w-full border-b border-zinc-200 flex items-center justify-between px-2'>
<div className='flex items-center gap-1.5'>
<Button
disabled={currPage <= 1}
onClick={() => {
setCurrPage((prev) =>
prev - 1 > 1 ? prev - 1 : 1
)
setValue('page', String(currPage - 1))
}}
variant='ghost'
aria-label='previous page'>
<ChevronDown className='h-4 w-4' />
</Button>
<div className='flex items-center gap-1.5'>
<Input
{...register('page')}
className={cn(
'w-12 h-8',
errors.page && 'focus-visible:ring-red-500'
)}
onKeyDown={(e) => {
if (e.key === 'Enter') {
handleSubmit(handlePageSubmit)()
}
}}
/>
<p className='text-zinc-700 text-sm space-x-1'>
<span>/</span>
<span>{numPages ?? 'x'}</span>
</p>
</div>
<Button
disabled={
numPages === undefined ||
currPage === numPages
}
onClick={() => {
setCurrPage((prev) =>
prev + 1 > numPages! ? numPages! : prev + 1
)
setValue('page', String(currPage + 1))
}}
variant='ghost'
aria-label='next page'>
<ChevronUp className='h-4 w-4' />
</Button>
</div>
<div className='space-x-2'>
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button
className='gap-1.5'
aria-label='zoom'
variant='ghost'>
<Search className='h-4 w-4' />
{scale * 100}%
<ChevronDown className='h-3 w-3 opacity-50' />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent>
<DropdownMenuItem
onSelect={() => setScale(1)}>
100%
</DropdownMenuItem>
<DropdownMenuItem
onSelect={() => setScale(1.5)}>
150%
</DropdownMenuItem>
<DropdownMenuItem
onSelect={() => setScale(2)}>
200%
</DropdownMenuItem>
<DropdownMenuItem
onSelect={() => setScale(2.5)}>
250%
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
<Button
onClick={() => setRotation((prev) => prev + 90)}
variant='ghost'
aria-label='rotate 90 degrees'>
<RotateCw className='h-4 w-4' />
</Button>
<PdfFullscreen fileUrl={url} />
</div>
</div>
<div className='flex-1 w-full max-h-screen'>
<SimpleBar
autoHide={false}
className='max-h-[calc(100vh-10rem)]'>
<div ref={pdfRef}>
<Document
loading={
<div className='flex justify-center'>
<Loader2 className='my-24 h-6 w-6 animate-spin' />
</div>
}
onLoadError={() => {
toast({
title: 'Error loading PDF',
description: 'Please try again later',
variant: 'destructive',
})
}}
onLoadSuccess={({ numPages }) =>
setNumPages(numPages)
}
file={url}
className='max-h-full'>
{isLoading && renderedScale ? (
<Page
width={width ? width : 1}
pageNumber={currPage}
scale={scale}
rotate={rotation}
key={'@' + renderedScale}
/>
) : null}
<Page
className={cn(isLoading ? 'hidden' : '')}
width={width ? width : 1}
pageNumber={currPage}
scale={scale}
rotate={rotation}
key={'@' + scale}
loading={
<div className='flex justify-center'>
<Loader2 className='my-24 h-6 w-6 animate-spin' />
</div>
}
onRenderSuccess={() =>
setRenderedScale(scale)
}
/>
</Document>
</div>
</SimpleBar>
</div>
</div>
)
}
export default PdfRenderer
from quill.
You have to define it #14 (comment)
from quill.
@ck18sss Here is how you can do it:
- Don't update the package.json file.
- Delete
node_modules
and.next
- Copy my
package.json
thenpnpm install
Demo: PDF Ninja Demo
Note: Check out my repository for reference 👍
You can also refer to this link for other issues: PDF Ninja Repository
If you find the project helpful, don't forget to give it a star ⭐️ on GitHub!
from quill.
Related Issues (20)
- Namespaces are not available in Pinecone Free Plan HOT 3
- /api/uploadthing?actionType=upload&slug=freePlanUploader (Error 400) HOT 1
- Kinde upgrade to V2 HOT 3
- What to put for ```STRIPE_WEBHOOK_SECRET=```? HOT 3
- Navbar issues HOT 7
- authentication issues HOT 4
- Property 'id' does not exist on type 'Promise<KindeUser | null>'.ts(2339) in dashboard/page.tsx HOT 1
- width from useResizeDetector() sometimes is undefined and thus <Page/> component doesnt render HOT 1
- TRPC install issue HOT 2
- Uploading Files stays in redirect phase HOT 3
- Call unsuccessful after 5 tries. Retrying in 16 seconds..
- kindeAuth/route.ts Error when deploying to Vercel HOT 2
- Trouble logging into dashboard on deployed version: Failed to load resource: the server responded with a status of 404 HOT 1
- Property 'email' does not exist on type 'Promise<KindeUser | null>'.ts HOT 5
- Uploadthing - unable to get presigned urls HOT 2
- acces denied when rendering pdf HOT 8
- Issue with loading pdf HOT 3
- api/message not found HOT 3
- Pincone.ts HOT 5
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from quill.