Extensions

Press shift + S to search API reference.

Model

Viewport

View source

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.

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

Members

class Viewport extends Watchable<WatchableViewportKey>
readonly isFullscreenboolean

true if the extension is fullscreen, false otherwise.

readonly isSmallerThanMinSizeboolean

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

readonly maxFullscreenSizeViewportSizeConstraint

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.

readonly minSizeViewportSizeConstraint

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.

readonly size{
height: number;
width: number;
}

The current size of the extension frame.

Can be watched.

addMaxFullscreenSize
function (sizeConstraint: Partial<ViewportSizeConstraint>) => UnsetFn
sizeConstraint

The width and height constraints to add. Both width and height are optional - if either is set to null, that means there is no max size in that dimension.

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.

addMinSize
function (sizeConstraint: Partial<ViewportSizeConstraint>) => UnsetFn
sizeConstraint

The width and height constraints to add. Both width and height are optional - if either is set to null, that means there is no min size in that dimension.

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.

enterFullscreenIfPossible
function () => void

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.

exitFullscreen
function () => void

Request to exit fullscreen mode

unwatch
function (keys: WatchableViewportKey | ReadonlyArray<WatchableViewportKey>, callback: FlowAnyFunction, context?: FlowAnyObject | null) => Array<WatchableViewportKey>
keys

the keys to unwatch

callback

the function passed to .watch for these keys

context

the context that was passed to .watch for this callback

Unwatch keys watched with .watch.

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

Returns the array of keys that were unwatched

watch
function (keys: WatchableViewportKey | ReadonlyArray<WatchableViewportKey>, callback: FlowAnyFunction, context?: FlowAnyObject | null) => Array<WatchableViewportKey>
keys

the keys to watch

callback

a function to call when those keys change

context

an optional context for this in callback.

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.