Added useCenterAnchor hook

src/Box.tsx

@@ -4,7 +4,7 @@ import Yoga from 'yoga-layout-prebuilt'
 import { ReactThreeFiber, useFrame } from '@react-three/fiber'
 
 import { setYogaProperties, rmUndefFromObj } from './util'
-import { boxContext, flexContext } from './context'
+import { boxContext, flexContext, SharedBoxContext } from './context'
 import { R3FlexProps } from './props'
 import { useReflow, useContext } from './hooks'
 
@@ -75,7 +75,7 @@ export function Box({
   ...props
 }: {
   centerAnchor?: boolean
-  children: React.ReactNode | ((width: number, height: number) => React.ReactNode)
+  children: React.ReactNode | ((width: number, height: number, centerAnchor?: boolean) => React.ReactNode)
 } & R3FlexProps &
   Omit<ReactThreeFiber.Object3DNode<THREE.Group, typeof THREE.Group>, 'children'>) {
   // must memoize or the object literal will cause every dependent of flexProps to rerender everytime
@@ -225,12 +225,12 @@ export function Box({
     }
   })
 
-  const sharedBoxContext = useMemo(() => ({ node, size }), [node, size])
+  const sharedBoxContext = useMemo<SharedBoxContext>(() => ({ node, size, centerAnchor }), [node, size, centerAnchor])
 
   return (
     <group ref={group} {...props}>
       <boxContext.Provider value={sharedBoxContext}>
-        {typeof children === 'function' ? children(size[0], size[1]) : children}
+        {typeof children === 'function' ? children(size[0], size[1], centerAnchor) : children}
       </boxContext.Provider>
     </group>
   )

src/context.ts

@@ -28,6 +28,7 @@ export const flexContext = createContext<SharedFlexContext>(initialSharedFlexCon
 export interface SharedBoxContext {
   node: YogaNode | null
   size: [number, number]
+  centerAnchor?: boolean
 }
 
 const initialSharedBoxContext: SharedBoxContext = {

src/hooks.ts

@@ -1,4 +1,4 @@
-import { useCallback, useContext as useContextImpl } from 'react'
+import { useCallback, useContext as useContextImpl, useMemo } from 'react'
 import { Mesh, Vector3 } from 'three'
 import { flexContext, boxContext } from './context'
 
@@ -15,9 +15,16 @@ export function useReflow() {
   return requestReflow
 }
 
+/**
+ * @returns [width, height, centerAnchor]
+ */
 export function useFlexSize() {
-  const { size } = useContext(boxContext)
-  return size
+  const {
+    size: [width, height],
+    centerAnchor,
+  } = useContext(boxContext)
+  const value = useMemo(() => [width, height, centerAnchor] as const, [width, height, centerAnchor])
+  return value
 }
 
 export function useFlexNode() {