react-paper-bindings icon indicating copy to clipboard operation
react-paper-bindings copied to clipboard

responsive size documentation

Open Loosetooth opened this issue 1 year ago • 1 comments

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 avatar Aug 24 '23 10:08 Loosetooth