LayoutWatcher listens for changes in either the width or aspect ratio of the viewport or the given root.

It does not track resize events; rather it's built on top of IntersectionObserver.

It manages registered callbacks globally and reuses IntersectionObservers for more efficient performance.

Methods

Properties

fetchCurrentLayout: () => Promise<LayoutData>

Get the current screen layout.

offLayout: (handler: OnLayoutHandler) => void

Removes a previously added handler.

onLayout: (handler: OnLayoutHandler, options?: OnLayoutOptions) => Promise<void>

Call the given handler whenever the layout changes.

Unless OnLayoutOptions.skipInitial is true, the handler is also called (almost) immediately with the current layout.

IMPORTANT: The same handler can not be added multiple times, even if the options differ. If the handler has already been added, it is removed and re-added with the current options.

LisnUsageError If the options are invalid.