diegomura / diegomura/react-pdf

Support multiple layout passes (Pull request included)

Open
#899 1 comment 1 reaction 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

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)})`}



);

```
Screenshot 2020-05-12 at 12 42 18

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

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.