NoA IgniteAccelerator Docs
Contact ↗
GitHubGitHub
  • Get Started
      • Context
      • PaymentEmbed
      • createRenderBlock
      • createRequiredContext
      • createSvgIcon
      • getReactElementRef
      • isRefObject
      • setRef
      • useElementSize
      • useFocusReturn
      • useForkRef
      • useInert
      • useIntersectionObserver
      • useInterval
      • useIsomorphicEffect
      • useMediaQuery
      • useMutationObserver
      • useRTL
      • useResizeObserver
      • useSticky
      • useTimeout
      • useVisualViewport
      • useWindowSize
      • typography
      • AnyFunction
      • Concatenate
      • DistributiveOmit
      • HintedNumber
      • HintedString
      • KeyOfAny
      • MapKeys
      • Maybe
      • OverridableStringUnion
      • Overwrite
      • Prettify
      • PropsFrom
      • Repeat
      • Split
      • WithFallback
      • Writeable
      • assert
      • calculateContrast
      • calculateLuminance
      • capitalize
      • clamp
      • colorContrast
      • deepmerge
      • hexToRGB
      • isObject
      • isPlainObject
      • lerp
      • mapRange
      • normalize
      • omit
      • pick
      • range
      • sleep

On This Page

  • useVisualViewport
  • Example
  • See
Question? Give us feedback →
@noaignitereact-utilsuseVisualViewport

useVisualViewport

Tracks window.visualViewport which updates on viewport resize.

  • @param options - Configurable options
  • @returns An object containing size information

Example

const { width, height, scale } = useVisualViewport()
 
if (!width) return null
 
return (
  <div>
    <span>{width} x {height}</span>
    <span>{scale > 1 ? 'Zoomed in' : scale < 1 ? 'Zoomed out' : 'No zoom'}</span>
  </div>
)

See

  • https://developer.mozilla.org/en-US/docs/Web/API/Visual_Viewport_API
useTimeoutuseWindowSize

Accelerator Docs