Feature Request: Highlighting based on bounding box coordinates

[richard-greenbaum67]

Hello,

I see that the useHighlightContext hook already makes it easy to add page highlights based on keywords and regex. Would it be possible to add a highlighting option that lets the programmer specify the bounding box rectangle to highlight on a given page, similar to how it is done in the react-pdf-viewer highlight plugin? This would be really helpful for my project.

Thanks for putting together an awesome component!

[david-reactpdf]

Hi @richard-greenbaum67, sorry for not getting back to you sooner. I've created a Codesandbox example to show how to add a bounding box rectangle to highlight a certain part of a PDF page. Would this be something you're looking for?

[richard-greenbaum67]

This looks great! One small thing - the units we've been using for the bounding box are page percentages instead of pixels. So height=20 would mean that the height of the highlight box should be 20% of the page's height. Could that be supported as well? Or maybe there is an easy way to make that conversion. Thanks @david-reactpdf !

[david-reactpdf]

Hi @richard-greenbaum67, that's an interesting use case. I've updated the Codesandbox sample to reflect your inputs. Please refer to addHighlightByBBox function in the sample for more details.

If you have any further feedback, please let me know. Happy to help!

[richard-greenbaum67]

No further feedback, this looks great @david-reactpdf . Will it be added as a feature in the core component?

[david-reactpdf]

Thanks @richard-greenbaum67 for reviewing. Since there is a workaround from the sample, we're currently evaluating this feature before proceeding further.

I'm a bit curious about drawing bbox coordinates with page percentages. Would you mind sharing a bit more on your use case and how else bbox may be applied to a PDF page? From what I understand you may use bbox to label or redact text.

Thanks again for the feedback!

[richard-greenbaum67]

@david-reactpdf We're using a PDF viewer to highlight the location on a page where the answer to a query was found in the document. And we use page percentages because our document chunking process generates bounding box coordinates as page percentages along with each chunk. This is more reliable for us than generating highlights based on text matches or regex, because the text of our response might not align exactly with the original text in the document, and even if it did, the same text might appear in multiple places.

[txm3278]

Adding this would also be very needed for my project. Currently without this feature, we can't switch over

[david-reactpdf]

@richard-greenbaum67 @txm3278 @owain-stratton

We’re working on a new feature for React PDF that introduces a useElementsPage hook, aimed at making it easier to add custom overlay elements (like bounding boxes) on specific PDF pages.

Here’s what we’re planning to include:

• A function to add an element to a specific page, you’ll get access to the page’s width and height for accurate placement
• A function to remove an element from a page
• A list of all currently added elements

Note that these elements will be view-only, they won’t be saved to the PDF or included when printing.

Would this support your use cases? Any thoughts or additional needs?