Extensions

Press shift + S to search API reference.

React hook

useViewport

View source

Returns the current Viewport object and updates whenever the viewport size, constraints, or fullscreen status changes.

import {useViewport} from '@airtable/blocks/ui';
function ViewportSize() {
const viewport = useViewport();
const toggleFullscreen = () => {
if (viewport.isFullscreen) {
viewport.exitFullscreen();
} else {
viewport.enterFullscreenIfPossible();
}
};
return (
<Fragment>
<button onClick={toggleFullscreen}>Toggle fullscreen</button>
viewport size: {viewport.size.width}x{viewport.size.height}
</Fragment>
);
}

Function signature

function () => Viewport