react-three-flex
react-three-flex copied to clipboard
Hook to get the position, similar to useFlexSize()
Essentially I need this:
const node = useFlexNode();
const { left, top } = node.getComputedLayout();
but
- This is in yoga-units (e.g, scaled by default x100)
- I don't think this is proper code for hooks, right? I'm not supposed to imperatively call
getComputedLayout
like this in a render function?
Why do I need this? My flex-items are buttons. Behind those buttons is the nested "page". The buttons use masks to show the page as you hover, since the page is actually "physically" behind the button. If you click the button you essentially fly through the button to the nested page. For buttons that are not perfectly in the center on the viewport I need to move the nested page. Right now it's only slightly offset by the flex style of the button, but since this is farther way I need to scale the position with the distance so you can properly look through the button and see the page (essentially a line from camera, through the center of the button to the center of the next page). Hence I need the position of each box item.
Yeah we really need this, makes little sense to write a positioning framework if you're not able to figure out where something will be positioned imho lol