Plans for page thumbnails?
ryansydnor opened this issue · 4 comments
Hello!
I'm currently using Mozilla's default viewer.html to display and navigate PDFs. I've ported a large majority of my website to React and would love to use react-pdf but heavily rely upon the thumbnails sidebar for ease of navigation.
Do you guys have any plans for supporting thumbnails? Is it something you'd like help with? Should we build a wrapper around react-pdf?
Looking forward to using react-pdf soon!
-Ryan
Hey there! Glad you asked. I feel like I failed to explain what react-pdf is and is not.
react-pdf is able to load a PDF file and display a page of it.
react-pdf is not a PDF viever. As you could certainly see, the repo includes a simple demo to show the possibilities of react-pdf. But it is not a part of the component itself.
It looks like you're trying to build a PDF viewer, only way more powerful than the one included.
What you would like to do is load PDF on your own in a container, then render the pages and their thumbnails using react-pdf, and add some interaction. Should you want to display 100 pages at once, you want to use react-pdf not once, but 100 times!
This is what Mozilla is doing also, by the way. They have their PDF viewer on GitHub, but they ask you to style it yourself if you want to use it.
Thanks for the reply @wojtekmaj. I feel this question is similar to the one posed in #23 so I apologize for having you repeat your response!
So what we'll likely end up doing is build our own PDF viewer using React. We'll use react-pdf as the core and extend it to include things like a toolbar and sidebar with thumbnails. If/when that happens, I'll reach back out.
Cool! I think there's lots of people waiting for such thing. It's a little too big of a task for my current load of responsibilities, but I'd love to help!
Might be worth noting that Mozilla seems to be using images for their thumbnails:
I'm not sure how, but they're turning each page of the pdf into an image dynamically and then setting those images to be the thumbnails. If anyone wants to try to create a sidebar like that one, you'll probably want to use this approach instead of rendering a ton of <PDF /> components for each page.
Edit: It looks like this is how they are doing it.