Skip to main content
useViewportSize(): Object Returns an object describing the viewport size, i.e. the video output resolution.

​
Return type

PropertyTypeDescription
wNumberWidth of viewport. Values are in pixels.
hNumberHeight of viewport. Values are in pixels.

​
Sample code

Additional examples of usage for this custom hook can be found in the source code for the VCS SDK.
import * as React from 'react';
import { Text } from '#vcs-react/components';
import { useViewportSize, useGrid } from '#vcs-react/hooks';

  const viewportSize = useViewportSize();
  const pxPerGu = useGrid().pixelsPerGridUnit;
  const guPerVh = viewportSize.h / pxPerGu;
  const guPerVw = viewportSize.w / pxPerGu;

  return (
    <Text>
      Number of grid units relative to the viewport: height = {guPerVh}, width ={' '}
      {guPerVw}
    </Text>
  );
}