diegomura / diegomura/react-pdf
Support multiple layout passes (Pull request included)
- Dominant language
- TypeScript
- Stars
- 16.8k
- Forks
- 1.3k
- Avg merge
- 5h 6m
- Merged PRs (30d)
- 52
Description
I wanted to measure the height and width of my components through React refs and useEffect hook. Further more I wanted to modify the layout according to these measurements. This wasn't supported by react-pdf (v2).
I modified the reconciler and layout renderer to perform multiple passes, running at least 2 times, and at most N times comparing the previous layout to the final layout. Once these are equal it will render the actual PDF.
I also changed the Fractals example to showcase this usecase:
examples/fractals/Fractals.js
```
...
const [bounds, setBounds] = useState(null);
const ref = useRef();
useEffect(() => {
if (ref.current.prevBox !== undefined) {
const { width, height } = ref.current.prevBox;
if (bounds === null) {
setBounds({ width, height });
}
}
}, []);
return (
{steps}
{bounds !== null &&
` (${Math.round(bounds.width)}x${Math.round(bounds.height)})`}
);
```

The included pull request is the best implementation I could come up with. One major problem is the async nature of the layout renderer. I did not find a way to sync it with the reconciler in order to run it before every mount effect. That is why this solution creates a new container on every pass.
Contributor guide
Assessment
This issue has not been assessed yet.