diegomura / diegomura/react-pdf
Add Support for Event Binding in `@react-pdf/renderer`
- Dominant language
- TypeScript
- Stars
- 16.8k
- Forks
- 1.3k
- Avg merge
- 5h 6m
- Merged PRs (30d)
- 52
Description
**Is your feature request related to a problem? Please describe**
Yes, the lack of event binding support in @react-pdf/renderer limits its flexibility. I’m always frustrated when I want to create PDFs with interactive elements—like clickable regions or dynamic toggles—but the library only supports static content generation. For example, I can’t attach an onClick handler to a or component to define actions within the PDF itself.
**Describe the solution you'd like**
I’d like @react-pdf/renderer to introduce support for event binding, such as onClick, onHover, or similar handlers, that could integrate with PDF features like JavaScript actions or annotations. Ideally, this would allow developers to define basic interactivity (e.g., triggering a navigation action, showing/hiding content, or linking to external scripts) directly in the React component tree, which would then be embedded in the generated within the generated PDF.
**Describe alternatives you've considered**
I’ve considered using the component for basic navigation, but it’s limited to static URLs or internal bookmarks and doesn’t offer true interactivity. Another workaround is handling interactivity in a separate React app and then passing the final state to @react-pdf/renderer, but this requires extra steps and doesn’t embed the interactivity in the PDF itself. I’ve also looked into post-processing the PDF with tools like PDF.js or iText to add interactivity, but this adds complexity and isn’t as seamless as native support within the library.
Additional context
This feature would make @react-pdf/renderer more versatile for use cases like interactive forms, clickable dashboards, or educational materials within PDFs. For example, a clickable button in the PDF could trigger a predefined action (like jumping to a section or opening a URL) using PDF’s built-in JavaScript support. Here’s a simple example of what it could look like:
```jsx
Click me!
```
Contributor guide
Assessment
This issue has not been assessed yet.