glodrei/docs/staging/resize.mdx

useful add-ons for react-three-fiber

---
title: Resize
sourcecode: src/core/Resize.tsx
---

[![](https://img.shields.io/badge/-storybook-%23ff69b4)](https://drei.pmnd.rs/?path=/story/staging-resize)

<Grid cols={4}>
  <li>
    <Codesandbox id="6yg0i3" />
  </li>
</Grid>

Calculates a boundary box and scales its children so the highest dimension is constrained by 1. NB: proportions are preserved.

```tsx
export type ResizeProps = JSX.IntrinsicElements['group'] & {
  /** constrained by width dimension (x axis), undefined */
  width?: boolean
  /** constrained by height dimension (y axis), undefined */
  height?: boolean
  /** constrained by depth dimension (z axis), undefined */
  depth?: boolean
  /** You can optionally pass the Box3, otherwise will be computed, undefined */
  box3?: THREE.Box3
  /** See https://threejs.org/docs/index.html?q=box3#api/en/math/Box3.setFromObject */
  precise?: boolean
}
```

```jsx
<Resize>
  <mesh />
</Resize>
```

You can also specify the dimension to be constrained by:

```jsx
<Resize height>
  <Box args={[70, 40, 20]}>
</Resize>
```