Breakpoints

The BreakPointHelper is working with the following set of default Breakpoints:

export const Breakpoints: Record<Size, number> = {
	xs: 0,
	sm: 576,
	md: 768,
	lg: 992,
	xl: 1200,
	xxl: 1400,
	xxxl: 1600,
};

getCurrentBreakpoint

Access the latest Breakpoint of the current Browser-Window

BreakPointHelper.getCurrentBreakpoint();
// i.e.: breakpoint: md, screenWidth: 768

Listen to Breakpoint changes

A breakpoint change is only triggered when the browser switches from one corresponding pixel to another.
i.e.: on rotating a Device or by resizing a Window.

BreakPointHelper.onResize((payload: IScreenBreakpoint) => {
	console.log('on breakpoint change', breakpoint);
});

getBreakpointByScreenWidth

Receive a specific Breakpoint by passing a screen width as parameter:

BreakPointHelper.getBreakpointByScreenWidth(750);
// Breakpoint: MD

isScreenSmallerThan

Check if current screen width is smaller than a specific Breakpoint:

BreakPointHelper.isScreenSmallerThan(Size.xxl);
// true

getBreakpoint

Retrieve a specific breakpoint by Size:

BreakPointHelper.getBreakpoint(Size.xs);
// breakpoint: xs, screenWidth: 0

Breakpoint Interface

export interface IBreakpoint {
	breakpoint: Size;
	screenWidth: number;
}