# Viewport

**Kind:** Class

Information about the current viewport

The `useViewport` hook is the recommend way to watch for viewport changes
button, but you can also use it directly.

```js
import {viewport} from '@airtable/blocks';
```

## Properties

### `isFullscreen`

Type: `boolean`

`true` if the extension is fullscreen, `false` otherwise.

### `isSmallerThanMinSize`

Type: `boolean`

`true` if the extension frame is smaller than `minSize`, `false` otherwise.

### `maxFullscreenSize`

Type: `ViewportSizeConstraint`

The maximum dimensions of the extension when it is in
fullscreen mode. Returns the smallest set of dimensions added with
`addMaxFullscreenSize`.

If `width` or `height` is null, it means there is
no max size constraint on that dimension. If `maxFullscreenSize` would be
smaller than `minSize`, it is constrained to be at least `minSize`.

### `minSize`

Type: `ViewportSizeConstraint`

The minimum dimensions of the extension - if the viewport gets smaller than this
size, an overlay will be shown asking the user to resize the extension to be bigger.

The largest set of dimensions added with addMinSize. If `width` or `height` is null, it means
there is no minSize constraint on that dimension.

### `size`

Type: `object`

The current size of the extension frame.

Can be watched.

## Methods

### `addMaxFullscreenSize(sizeConstraint)`

Add a maximum fullscreen size constraint. Use `.maxFullscreenSize` to get
the aggregate of all added constraints.

Returns a function that can be called to remove the fullscreen size constraint that was added.

**Parameters:**
- `sizeConstraint` (`Partial<ViewportSizeConstraint>`) — The width and height constraints to add. Both

**Returns:** `UnsetFn`

### `addMinSize(sizeConstraint)`

Add a minimum frame size constraint. Use `.minSize`` to get the aggregate
of all added constraints.

Upon adding a constraint, if the extension is focused and the frame is smaller than the
minimum size, the extension will enter fullscreen mode.

Returns a function that can be called to remove the  size constraint that was added.

**Parameters:**
- `sizeConstraint` (`Partial<ViewportSizeConstraint>`) — The width and height constraints to add. Both `width`

**Returns:** `UnsetFn`

### `enterFullscreenIfPossible()`

Request to enter fullscreen mode.

May fail if another extension is fullscreen or this extension doesn't have
permission to fullscreen itself. Watch `isFullscreen` to know if the
request succeeded.

**Returns:** `void`

### `exitFullscreen()`

Request to exit fullscreen mode

**Returns:** `void`

### `unwatch(keys, callback, context?)`

Unwatch keys watched with `.watch`.

Should be called with the same arguments given to `.watch`.

Returns the array of keys that were unwatched

**Parameters:**
- `keys` (`WatchableViewportKey | ReadonlyArray<WatchableViewportKey>`) — the keys to unwatch
- `callback` (`FlowAnyFunction`) — the function passed to `.watch` for these keys
- `context?` (`FlowAnyObject | null`) — the context that was passed to `.watch` for this `callback`

**Returns:** `Array<WatchableViewportKey>`

### `watch(keys, callback, context?)`

Get notified of changes to the viewport.

Watchable keys are:
- `'isFullscreen'`
- `'size'`
- `'minSize'`
- `'maxFullscreenSize'`

Every call to `.watch` should have a matching call to `.unwatch`.

Returns the array of keys that were watched.

**Parameters:**
- `keys` (`WatchableViewportKey | ReadonlyArray<WatchableViewportKey>`) — the keys to watch
- `callback` (`FlowAnyFunction`) — a function to call when those keys change
- `context?` (`FlowAnyObject | null`) — an optional context for `this` in `callback`.

**Returns:** `Array<WatchableViewportKey>`