@react-three/flex Documentation

Layout calculations do not run every frame for performance reasons. A reflow (recalculation) is automatically triggered when:

• <Flex /> props change (e.g., alignItems, size).
• <Box /> props change (e.g., flexGrow, margin).
• <Flex /> or <Box /> rerenders due to children differences.

Manual Reflow: If you change object properties via useFrame, react-spring, or if a <Box /> is not rerendering because it is defined in a parent component, you must manually trigger a reflow using the useReflow() hook.

// Manual reflow with useFrame
function AnimatedBox() {
  const ref = useRef()
  const reflow = useReflow()
  useFrame(({ clock }) => {
    ref.current.scale.x = 1 + Math.sin(clock.getElapsed())
    reflow()
  })
  return (
    <Box centerAnchor>
      <mesh ref={ref}>
        <boxBufferGeometry attach="geometry" args={[10, 10, 10]} />
      </mesh>
    </Box>
  )
}

// Manual reflow with useEffect (when Box is outside the component)
function AnimatedBox() {
  const [state, setState] = useState(true)
  const reflow = useReflow()
  useEffect(reflow, [state])
  return (
    <mesh scale={[state ? 1 : 3, 1, 1]}>
      <boxBufferGeometry attach="geometry" />
    </mesh>
  )
}

Since @react-three/flex only controls position by default, you must manually handle sizing if you want elements to stretch. You can access the calculated container size in two ways:

1. Children render function: Pass a function as children to <Box /> to receive width and height.
2. useFlexSize hook: Use the hook inside a component. Important: The useFlexSize hook only works if the <Box /> is defined outside the component using the hook.

// Method 1: Children render function
<Flex>
  <Box width="auto" height="auto" flexGrow={1} centerAnchor>
    {(width, height) => <Plane args={[width, height]} />}
  </Box>
</Flex>

// Method 2: useFlexSize hook
function Inner() {
  const [width, height] = useFlexSize()
  return <Plane args={[width, height]} />
}

function Outer() {
  return (
    <Flex>
      <Box width="auto" height="auto" flexGrow={1} centerAnchor>
        <Inner />
      </Box>
    </Flex>
  )
}

The Box component is the fundamental building block of the react-three-flex system. It acts as a container for 3D objects and uses Yoga (a flexbox engine) to manage layout.

Key Features:

• Flexbox Props: Supports standard flexbox properties like flexDirection, alignItems, justifyContent, flexGrow, margin, and padding via shorthand or longhand names.
• Sizing: Supports width, height, minWidth, maxWidth, minHeight, and maxHeight.
• Render Prop for Children: The children prop can be a function that receives the computed width, height, and centerAnchor status. This allows children to react to the layout size calculated by the flex engine.
• Center Anchor: The centerAnchor prop (boolean) determines how the content is anchored within the box.

Note: For a container that manages multiple children using flexbox rules, use the <Flex /> component instead of <Box />.