Create sections within pdf using custom HTML tags and classes or ids

[manishPh]

Before you start - checklist

• [X] I understand that React-PDF does not aim to be a fully-fledged PDF viewer and is only a tool to make one
• [X] I have checked if this feature request is not already reported

Description

I'd like to add a feature to create sections within pdf document. For example, in the tax form PDF, you can clearly create sections around, personal details, deductions details, income details etc.

Proposed solution

That means wrapping a section of generated html tags with something like

<div class="personal-details">
<span>...</span>
<span>...</span>
<span>...</span>
</div>

I am not clear on using customTextRenderer prop for <Page /> because it gets each and every string that can be modified. But not sure how to accumulate strings and then wrap them with a <div> tag with specific class to "create" sections. I hope I'm able to explain the problem.

Usage: Create a guided tour within rendered pdf with sections using packages like reactour or joyride to guide users through different sections for better explanations.

Alternatives

n/a

Additional information

[manishPh]

In the above screenshot, I was able to add a div tag with class around a the string Caution using customTextRenderer prop but ideally I would like to add a div tag around section say fields (in the tax form) from 22a to 27 and add className like tax-payments-details.

[manishPh]

@wojtekmaj any pointers would be appreciated 👍

[github-actions[bot]]

This issue is stale because it has been open 90 days with no activity. Remove stale label or comment or this issue will be closed in 14 days.

[github-actions[bot]]

This issue was closed because it has been stalled for 14 days with no activity.