diegomura / diegomura/react-pdf
Conditional render if page is about to break
- 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.**
I want to be able to add a line that says "Content will continue on the next page..." if my table happens to break across into the next page. This is not the same as using `fixed` as I have multiple such tables that begin and end at dynamic parts of the page.
**Describe the solution you'd like**
---
**Suggestion 1 - param for conditional render**
The simplest solution I can think of (from a user perspective, maybe not dev 😃) is to be able to read the amount of space left inside a render prop's params:
```jsx
rows.map((row) => (
<>
presenceAhead < 100
? `Continues on next page...` // Only renders if less than 100 units left
: ''}
/>
{/* Renders on the next page if less than 100 units left */}
My repeating row content
))
```
---
**Suggestion 2 - maxPresenceAhead**
While we do have a `minPresenceAhead` props, we don't have a `maxPresenceAhead`. Maybe that would be all that's needed (although a different name might be warranted as it doesn't work exactly opposite, so could be confusing).
In this scenario, if an element has `maxPresenceAhead={100}` and the page contains more than 100 units (pixels?) of space remaining, it would just not render at all.
```jsx
{rows.map((row) => (
<>
Continues on next page...
{row.text}
))}
```
The above would in such a situation skip rendering the first line each iteration of `rows` until only 100 units remain. The line of text immediately after requires at least 100, meaning it would then shift to the next page.
Of course, this would run into issues if the content to render is larger than the remaining space, but that would be an understandable side effect (user error 😄).
---
**Suggestion 3 - Inspector component**
A different and possibly more dynamic solution is to introduce a new Spy/Inspector component (name subject to change) that allows to look ahead and inspect some details, and conditionally render based on that. Maybe this is preferable if the previous solutions would introduce performance issues.
```jsx
presenceAhead < 100 && Continues on next page...}
{/* or */}
renderCondition={(metadata) => true}
render={() => }
/>
```
The `metadata` params here could potentially include other useful information. Space ahead, page numbers, maybe a way to check if this is the last page since I've seen others request such a feature.
---
**Describe alternatives you've considered**
I've attempted some hacky solutions around storing the `pageNumber` from a render prop param, and comparing it in a different render prop, but if those numbers differ, that means we've already moved to the next page, so I can't exactly go back to the last page to add the line at that point.
Contributor guide
Assessment
This issue has not been assessed yet.