search

agentcooper / react-pdf-highlighter

Set of React components for PDF annotation
https://agentcooper.github.io/react-pdf-highlighter/
MIT License
1.04k stars 407 forks source link

Access to PDF.js functionalities #165

Closed Brenw10 closed 2 weeks ago

Brenw10 commented 2 years ago

Hey guys, I am trying to access PDF.js functionalities, is it possible? For example, I want to display for the user the Outline contents (catalogue). How can I have access to it?

Also, can I move the user to a page dynamically? Or even show only one page and show add next and back buttons?

sarcXD commented 2 years ago

@Brenw10 I did this recently, so I guess I can point it out for you. Please note, this is just my way of doing it, and what I figured out to be a reasonable approach (not ideal). React-pdf-highlighter natively does not support this. So what I did was forked this (I was working on something time sensitive, so just went hail mary here) and added a props object, what that does is pass an action and dispatcher, and I basically (since im using functional components), used the useReducer hook. I am storing an object for all pdf variables I need for actions you have mentioned, next/prev page, zoom in/out etc, and once in the PdfHighlighter.tsx file these variables are created, I call my dispatch and store these on my layer, where I do all of these actions.

TLDR: didnt find it supported, implemented myself after a lot of trial n error, with useReducer or Redux (upto you). Don't have gist for it, pretty lazy, could create one if need be. You can check the main changes I made here though https://github.com/sarcXD/react-pdf-highlighter/blob/master/src/components/PdfHighlighter.tsx

hope it helps somewhat :)