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

Added useCenterAnchor hook #60

Merged
merged 1 commit into from
Aug 29, 2021

Conversation

saitonakamura
Copy link
Collaborator

@saitonakamura saitonakamura commented Aug 23, 2021

It allows to read centerAnchor prop on a Box, which is useful when positioning something absolutely inside a Box

My usecase - I have a BoxBackground component that need to know size and centerAnchor to position itself correctly.
Looks something like this, but now I have to explicitly pass centerAnchor (because I have no way of knowing it)

export const BoxBackground = ({ children, centerAnchor })  => {
  const [width, height] = useFlexSize();
  return (
    <mesh
      position={[
        centerAnchor ? 0 : width / 2,
        centerAnchor ? 0 : -height / 2,
        0.001,
      ]}
    >
      <planeGeometry args={[width, height]} />
      {children}
    </mesh>
  );
}

with this hook (or a render prop) it can be rewritten as

export const BoxBackground = ({ children })  => {
  const [width, height, centerAnchor] = useFlexSize();
  return (
    <mesh
      position={[
        centerAnchor ? 0 : width / 2,
        centerAnchor ? 0 : -height / 2,
        0.001,
      ]}
    >
      <planeGeometry args={[width, height]} />
      {children}
    </mesh>
  );
}

@giulioz
Copy link
Member

giulioz commented Aug 25, 2021

Can't this be renamed to something more specific, such as useFlexCenterAnchor()?
Or alternatively moved into useFlexSize

@saitonakamura
Copy link
Collaborator Author

Yeah, totally, I was thinking about this too. I like moving it to useFlexSize better (this way it resembles Box children function with the args).

It allows to read centerAnchor prop on a Box,
which is useful when positioning something absolutely inside a Box
@saitonakamura
Copy link
Collaborator Author

saitonakamura commented Aug 27, 2021

@giulioz , moved it into useFlexSize hook

@giulioz
Copy link
Member

giulioz commented Aug 29, 2021

Nice! Gotta merge some things and then release

@giulioz giulioz merged commit ab622a2 into pmndrs:master Aug 29, 2021
@saitonakamura saitonakamura deleted the center-anchor-hook branch August 29, 2021 16:55
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

Successfully merging this pull request may close these issues.

2 participants