responsive size documentation

[Loosetooth]

I was just looking at getting started with these bindings, and one of the first things I would like to do was to set up responsive sizing of the canvas. (I.e. '50%', '50vw', etc., basically css sizing.)

As you most definitely know, we currently have to provide width and height props to the Canvas element. It was obvious to me that I'd have to use some kind of size hook in react to get the right size in pixels, but I was unsure how to do it correctly.

But then I was looking through the source code, and in this file it's done using the react-use-measure package. We can refer to another html element, and the canvas copies the size automatically, awesome!

I'm sure other users would like to achieve the same thing, so let's try to improve. What do you think about these two ideas:

1. Update the documentation somewhere to show how easy it is to make a canvas with responsive size using the react-use-measure package
2. Change the default behavior of the canvas, so that it automatically takes the width and height of the parent component. This would be in line with other react-fiber packages like react-three-fiber where the user specifies a 'parent' div, with a unique id.

Perhaps we can even do both options.
I'm willing to make a pull request.
Thanks for your time and work.

[Loosetooth]

Here it is mentioned that the react-three-fiber canvas is responsive to the parent component. Just as an example.

[HriBB]

You can position the canvas absolutely, then use something like https://www.npmjs.com/package/react-use-measure on the client, to get the width/height. Of course this does not work in SSR

[HriBB]

Also check out v3 branch, will release it soon
https://github.com/react-paper/react-paper-bindings/tree/v3