### Install @react-three/flex

Source: https://github.com/pmndrs/react-three-flex/blob/master/README.md

Installs the @react-three/flex package using npm. This is the first step to integrate flexbox layouts into your react-three-fiber applications.

```bash
npm install @react-three/flex
```

--------------------------------

### Start Development Server

Source: https://github.com/pmndrs/react-three-flex/blob/master/examples/README.md

Runs the React application in development mode. It opens the app in the browser at http://localhost:3000 and enables hot reloading for edits. Lint errors are displayed in the console.

```bash
yarn start
```

--------------------------------

### Eject Configuration

Source: https://github.com/pmndrs/react-three-flex/blob/master/examples/README.md

A one-way operation that removes the single build dependency from the project. It copies all configuration files (webpack, Babel, ESLint, etc.) into the project, granting full control over customization. After ejecting, commands like `yarn start` will use the copied scripts.

```bash
yarn eject
```

--------------------------------

### Measuring Container with onReflow

Source: https://github.com/pmndrs/react-three-flex/blob/master/README.md

Demonstrates how to use the `onReflow` prop on the root `<Flex>` component to get the calculated total width and height of the flex container. This is useful for synchronizing with DOM elements or modifying scrollable areas.

```jsx
<Flex onReflow={(totalWidth, totalHeight) => ...}>
 {/* ... */}
</Flex>
```

--------------------------------

### Build for Production

Source: https://github.com/pmndrs/react-three-flex/blob/master/examples/README.md

Builds the React application for production, optimizing it for performance. The output is placed in the `build` folder, with minified code and hashed filenames for efficient deployment.

```bash
yarn build
```

--------------------------------

### Run Tests

Source: https://github.com/pmndrs/react-three-flex/blob/master/examples/README.md

Launches the test runner in interactive watch mode. This allows for continuous testing as code changes are made. Refer to the Create React App documentation for more details on running tests.

```bash
yarn test
```

--------------------------------

### Flex Component Usage

Source: https://github.com/pmndrs/react-three-flex/blob/master/README.md

Demonstrates the basic usage of the Flex component, including its core props like size, position, direction, plane, scaleFactor, and event handlers. It also shows how to include child Box components and pass through R3FlexProps.

```jsx
<Flex
  size={[1, 1, 1]} // Total size of the flex container, see above
  position={[0, 0, 0]} // Default - position for the flex container in the scene
  direction="ltr" // Default - right to left or right to left
  plane="xy" // Default - plane axes, see above
  scaleFactor={100} // Default - integer scale factor, see above (Sizing)
  onReflow={fn} // Called everytime the layout is recalculated
  {...R3FlexProps} // Standard Flexbox props, described below
>
  <Box>{/* ... */}</Box>
</Flex>
```

--------------------------------

### react-three-flex API Reference

Source: https://github.com/pmndrs/react-three-flex/blob/master/README.md

Provides a comprehensive overview of the props available for the Flex and Box components in react-three-flex. It details standard Flexbox properties inherited from Yoga, as well as custom props specific to the library.

```APIDOC
Flex Component Props:
  size: [number, number, number]
    Description: Total size of the flex container.
    Default: [1, 1, 1]
  position: [number, number, number]
    Description: Position for the flex container in the scene.
    Default: [0, 0, 0]
  direction: "ltr" | "rtl"
    Description: Direction of the flex layout (left-to-right or right-to-left).
    Default: "ltr"
  plane: "xy" | "xz" | "yz"
    Description: Specifies the plane axes for the flex layout.
    Default: "xy"
  scaleFactor: number
    Description: An integer scale factor used for sizing calculations.
    Default: 100
  onReflow: function
    Description: Callback function invoked whenever the layout is recalculated.

Box Component Props:
  centerAnchor: boolean
    Description: If true, the inner content's position is relative to its center.

Shared Props (from Yoga/Flexbox):
  Standard Flexbox properties such as 'alignItems', 'justifyContent', 'flexWrap', 'padding', 'margin', etc., are supported. Shorthands like 'pt' (paddingTop), 'align' (alignItems), 'justify' (justifyContent), and 'wrap' (flexWrap) are also available for convenience.
```

--------------------------------

### Flexbox Props Shorthands

Source: https://github.com/pmndrs/react-three-flex/blob/master/README.md

Demonstrates the use of shorthand properties for common Flexbox props, such as padding, alignment, justification, and wrapping. These shorthands provide a more concise way to apply styles, mirroring CSS conventions.

```jsx
// Flex with padding top set to 10, alignItems to 'center', justifyContent to 'space-around' and flexWrap to 'wrap'
<Flex pt={10} align="center" justify="space-around" wrap="wrap">
  {/* ... */}
</Flex>
```

--------------------------------

### Flex Container Sizing

Source: https://github.com/pmndrs/react-three-flex/blob/master/README.md

Demonstrates how to set the dimensions of a root flex container using the `size` prop. This is crucial for wrapping and responsiveness in 3D layouts.

```jsx
<Flex flexDirection="row" flexWrap="wrap" size={[300, 200, 0]}>
  {/* ... */}
</Flex>
```

--------------------------------

### Margin and Padding

Source: https://github.com/pmndrs/react-three-flex/blob/master/README.md

Shows how to apply margins and padding to `<Flex />` and `<Box />` components, similar to DOM elements, to control spacing and layout.

```jsx
<Flex flexDirection="row" size={[300, 200, 0]} padding={30} margin={5}>
  <Box padding={5} marginTop={5} centerAnchor>
    <mesh geometry={sphere} />
  </Box>
</Flex>
```

--------------------------------

### Basic Flexbox Layout with @react-three/flex

Source: https://github.com/pmndrs/react-three-flex/blob/master/README.md

Demonstrates a basic layout using the Flex and Box components from @react-three/flex. It centers two mesh objects within a flex container, utilizing justify and align properties.

```jsx
import { Flex, Box } from '@react-three/flex'

const Layout = () => (
  <Flex justifyContent="center" alignItems="center">
    <Box centerAnchor>
      <mesh geometry={box} />
    </Box>
    <Box centerAnchor flexGrow={1}>
      <mesh geometry={torus} />
    </Box>
  </Flex>
)
```

--------------------------------

### Box Component Usage

Source: https://github.com/pmndrs/react-three-flex/blob/master/README.md

Illustrates the usage of the Box component, highlighting the centerAnchor prop for positioning content relative to its center and the ability to pass through R3FlexProps. It also shows how to render a mesh within the Box.

```jsx
<Box
  centerAnchor // If the inner content position is relative to its center, see above (Anchors)
  {...R3FlexProps} // Standard Flexbox props, described below
>
  <mesh geometry={box} />
</Box>
```

--------------------------------

### Controlling Element Sizing with useFlexSize Hook

Source: https://github.com/pmndrs/react-three-flex/blob/master/README.md

Demonstrates controlling element sizing using the `useFlexSize` hook. This hook provides the width and height of the flex item, enabling dynamic adjustments to child components. Note: The hook only works when the Box is outside the component using it.

```javascript
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>
  )
}
```

--------------------------------

### Manual Reflow with useFrame

Source: https://github.com/pmndrs/react-three-flex/blob/master/README.md

Shows how to manually trigger a reflow using the `useReflow()` hook within the `useFrame` hook to update component properties, such as scale, and ensure the layout recalculates.

```jsx
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}>

```

--------------------------------

### Nesting Flex Containers

Source: https://github.com/pmndrs/react-three-flex/blob/master/README.md

Illustrates how to create complex layouts by nesting `<Flex />` components, allowing for hierarchical arrangement of elements.

```jsx
<Flex flexDirection="row" flexWrap="wrap" size={[50, 0, 0]}>
  <Box centerAnchor>
    <mesh geometry={sphere} />
  </Box>
  <Box flexDirection="column" flexWrap="no-wrap">
    <Box centerAnchor>
      <mesh geometry={sphere} />
    </Box>
    <Box centerAnchor>
      <mesh geometry={box} />
    </Box>
  </Box>
</Flex>
```

--------------------------------

### Manual Reflow with useEffect

Source: https://github.com/pmndrs/react-three-flex/blob/master/README.md

Illustrates how to manually trigger a reflow using `useReflow()` within a `useEffect` hook, dependent on a state change, to ensure layout recalculation when external factors change.

```jsx
function AnimatedBox() {
  const [state, setState] = useState(true)
  useInterval(() => setState((s) => !s), 1000)
  const reflow = useReflow()
  useEffect(reflow, [state])
  return (
    <mesh ref={ref} scale={[state ? 1 : 3, 1, 1]}>

```

--------------------------------

### Using centerAnchor for Object Positioning

Source: https://github.com/pmndrs/react-three-flex/blob/master/README.md

Illustrates how to use the `centerAnchor` prop with the Box component. This prop is crucial when your THREE.js objects are centered by default, aligning their positioning with the flexbox layout's expectations.

```jsx
<Box centerAnchor>
  <mesh geometry={sphere} />
</Box>
```

--------------------------------

### Box Component with Function Children

Source: https://github.com/pmndrs/react-three-flex/blob/master/README.md

Shows an alternative way to use the Box component by passing a function as its children. This function receives the calculated width and height of the Box, allowing for dynamic rendering of content based on layout.

```jsx
<Box>{(width, height) => <Model width={width} height={height} />}</Box>
```

--------------------------------

### Controlling Element Sizing with Children Render Function

Source: https://github.com/pmndrs/react-three-flex/blob/master/README.md

Shows how to control element sizing within a flex container by using a children render function. This function receives the calculated width and height, allowing dynamic sizing of child elements like Planes.

```jsx
<Flex>
  <Box width="auto" height="auto" flexGrow={1} centerAnchor>
    {(width, height) => <Plane args={[width, height]} />}
  </Box>
</Flex>
```

--------------------------------

### Axis Orientation

Source: https://github.com/pmndrs/react-three-flex/blob/master/README.md

Explains how to specify the 2D plane for flex layout calculations using the `plane` prop. The default is 'xy', but 'yz' and 'xz' are also supported. The `size` prop is interpreted relative to the chosen axes.

```jsx
<Flex plane="xy" size={[100, 200, 0]}>
  {/* ... */}
</Flex>
```

--------------------------------

### Triggering Reflow with useInterval

Source: https://github.com/pmndrs/react-three-flex/blob/master/README.md

Demonstrates how a state change within a component that renders a Box triggers a reflow. This is contrasted with a scenario where the Box is rendered outside the component, which does not trigger a reflow.

```jsx
function AnimatedBox() {
  // Since <Box/> is inside the component, setting the state will rerender it, thus causing a reflow.
  // ⚠️ If <Box/> were outside this component, this would NOT cause a reflow!
  const [state, setState] = useState(true)
  useInterval(() => setState((s) => !s), 1000)
  return (
    <Box centerAnchor>
      <mesh>
        <boxBufferGeometry attach="geometry" args={[state ? 10 : 30, 10, 10]} />

```

```jsx
function AnimatedBox() {
  // ⚠️ Setting state does not rerender <Box/> since it's in the parent
  // ‼️ No Reflow!!
  const [state, setState] = useState(true)
  useInterval(() => setState((s) => !s), 1000)
  return (
    <mesh scale={[state ? 1 : 3, 1, 1]}>
      <boxBufferGeometry attach="geometry" />
    </mesh>
  )
}

function Layout() {
  return (
    <Flex>
      <Box centerAnchor>
        <AnimatedBox />

```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.