Window Resize Helper

Listen to Window screen-width changes

A screen-width change is only triggered when the window width changes in pixels.

i.e.: on rotating a Device or by resizing a Window.

import { WindowResizeHelper } from '@oardi/ts-utils';

const unsubscribe = WindowResizeHelper.onResize(width => {
	console.log(width);
});

Unsubscribe listening to screen-width changes

call the previous assigned unsubscribe

unsubscribe();

Callbacks are debounced by 150 ms and only run when the viewport width actually changed. Removing the final listener also removes the underlying browser resize listener. This helper requires a browser environment. Errors thrown by a callback are ignored so the remaining callbacks still receive the current and future resize notifications. Each callback is responsible for handling or reporting its own errors.

Resolve the current breakpoint after resizing

Combine the emitted width with BreakPointHelper when both the viewport width and its breakpoint are needed:

import { BreakPointHelper, WindowResizeHelper } from '@oardi/ts-utils';

const unsubscribe = WindowResizeHelper.onResize(width => {
	const breakpoint = BreakPointHelper.getBreakpointByScreenWidth(width);

	console.log(width, breakpoint.breakpoint);
});

Passing the emitted width to getBreakpointByScreenWidth() keeps both values tied to the same resize notification.