Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Hook to get the position, similar to useFlexSize() #84

Open
Prinzhorn opened this issue Nov 7, 2022 · 1 comment
Open

Hook to get the position, similar to useFlexSize() #84

Prinzhorn opened this issue Nov 7, 2022 · 1 comment

Comments

@Prinzhorn
Copy link

Essentially I need this:

const node = useFlexNode();
const { left, top } = node.getComputedLayout();

but

  1. This is in yoga-units (e.g, scaled by default x100)
  2. 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.

@kwyntes
Copy link

kwyntes commented Feb 24, 2024

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants