# ViewportConstraint

**Kind:** Class

When mounted, this wrapper component applies size constraints to the `Viewport`.
Like `addMinSize`, this will fullscreen the extension if necessary and possible when
`minSize` is updated.

```js
import {ViewportConstraint} from '@airtable/blocks/ui';
<ViewportConstraint minSize={{width: 400}} />
```

```js
import {ViewportConstraint} from '@airtable/blocks/ui';
<ViewportConstraint maxFullScreenSize={{width: 600, height: 400}}>
     <div>I need a max fullscreen size!</div>
</ViewportConstraint>
```

---

## ViewportConstraintProps

**Kind:** Interface

Props for the `ViewportConstraint` component.

### Properties

#### `children?`

Type: `React.ReactNode`

The contents of the viewport constraint.

#### `maxFullscreenSize?`

Type: `ViewportSizeConstraintProp`

The maximum viewport size of the extension when it is in fullscreen mode.

#### `minSize?`

Type: `ViewportSizeConstraintProp`

The minimum viewport size of the extension.