react-paper-bindings
react-paper-bindings copied to clipboard
responsive size documentation
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:
- Update the documentation somewhere to show how easy it is to make a canvas with responsive size using the
react-use-measure
package - Change the default behavior of the canvas, so that it automatically takes the
width
andheight
of the parent component. This would be in line with other react-fiber packages likereact-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.