diegomura / diegomura/react-pdf

How to let parent break with it's children?

Open
#1,544 15 comments 0 reactions 0 assignees View on GitHub
new feature
Dominant language
TypeScript
Stars
16.8k
Forks
1.3k
Avg merge
5h 6m
Merged PRs (30d)
52

Description

Given a view with a header text and a view with a body text - when the body is moved fully to the next page, it's parent is kept on the previous page. That makes it look like the header is now orphaned.

Example here in the [REPL](https://react-pdf.org/repl?code=3187b0760ce02e00408a057025803c450298c0bc300500943807cf805030c00f0022230080b6198531165d400a02180e659a004f003619b006f61622003a0046200099080beec02406aa00d490600ee31a7889126231e009cf9230005440007005c3001b0026000c3157aaa007a3d43764e4e6d10a3463b2e2b0c0816600c0041000b0c1e254900466f00fb0c143600094ca50c2b20c2e2e220a8b0f09848fd0346a6a6aa1ad8102b27349e484977750e0e8e80611e082418286510181e0047040c111825005b9e18601e18b00067e33b25d0560c64ab313d90085dd5ac0abbd66b18003335c4801a4d8c31b8dc22245830781b44bfd12102725478f21e1fc9cbd278c15648199c2e6ce77888d67c459e23004d79a3902c4050328036b8c08ab0ab3e8c0c0242ec2a1b001bb837aff630213e6b2b26060f22b0f0005e20590c0520879bc4203001908c9cf24324c094aa6a244bb272339862a587258500411a75581e072ec8b2f96175ff0d97105f3180006400874e75460fee82b3dcb540a52fac0aa9823a5e20c563040225b62a5e36d348000dc300661316a8a122c3299e5120942060f8dad95241f010ef161d3a0587d840407f154822305818897525faf01196ebacc696607042579bab2c7400b2836000cfee3d44012e368325020398b79af6566b0db6d1130211fdc123fa065ae7f083f303c02db8655aba9d35215ddd607c3fb48165eec78b2ba7f8bc03230a29faff93c7f0c462980bbb624a34c99b58980402fb84c89583009a984cc50830a2920560ec4b0887c0005f5fb4c50120dda2c8b382d5a8e160f000159646c9604e151bd38e25ac1009524d3c4a0008562422aafefc6660828609160f1330a1bbc37801f3aec20581ff98057024c59647f0da2d8c06029682702180b1407ac7b01cb6a16985f12f120089fc08131269bc3f2a2f69dc71a9c587e8469b93c1a19c024503c4dda3c6b1fc2652c919fe1854063840d79d9bb30ee0b009eb8ad62f1822de18054cc920473866228594124b668e08b4a34120f72718c824bb2ecfb21cd62b6919887c09cbb3ac8eaecd44608c322aaa55e7bce570ecb2285d51146c1901a384f52b4ed350812f002234411d00c330ac3b0041a6641900018b80502c8f12d80d958780481c07cb6488421b80039000f210018e09281f4fc1c040563009f5a4501404e0402e2048107c575c87c3403c351c02c8a023081040813dc7f4884a2041c8e400332040026800faf6000d23a3b8200001c003a8801cbc8002a92824e3094c001a00270f0290a4b22431f07d642a82759d17340c6140a238eb8000ca8ad882ac641835dfda649823d1c2282a1b84f7a159286601f08e2b830093002b10366d2816df00010ba0f32306e3b80ee025c73b761f0252f44824a6f0886e3db8edf852ccb640004a99300501703439d374b01503d54220a83a058204c40cb400000
)

I'd like to be able to avoid this, and have a few alternative ideas:

1. Maybe a parent that is emptied of it's children on one page should always break to next page (or alternatively worded: a parent is always linked to it's first child, so it breaks with the first child, if this is pushed to next page).
2. Maybe the orphan attribute should be available on View components with a point value (instead of lines), so a View is never split into pieces smaller than this value, but rather pushed to next page.
3. Maybe two siblings and/or parent-child elements should be linkable, so that they always break to next page together

Does any of these solutions sound like they would be possible and a good fit for the API?

I think 1 and 2 would go great together for solving the problem and when making table-like setups where you want all cells in a row break to next page together - while still allowing the row to wrap.

Would you like a PR for any of them? :)

And if there are any current solutions, that I haven't thought of, I'd like to hear those as well of course.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.