Added useCenterAnchor hook

[saitonakamura]

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]

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

[saitonakamura]

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).

[saitonakamura]

@giulioz , moved it into useFlexSize hook

[giulioz]

Nice! Gotta merge some things and then release