BreakPoint Helper

Breakpoints

BreakPointHelper uses the exported BreakPoints map and the Size string union:

import { BreakPointHelper, BreakPoints, type IBreakPoint, type Size } from '@oardi/ts-utils';

const breakPoints: Record<Size, number> = BreakPoints;

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

getCurrentBreakpoint

Get the breakpoint for the current browser viewport:

const current: IBreakPoint = BreakPointHelper.getCurrentBreakpoint();
// i.e. { breakpoint: 'md', screenWidth: 768 }

getBreakpointByScreenWidth

Resolve a breakpoint for a specific screen width:

BreakPointHelper.getBreakpointByScreenWidth(750);
// { breakpoint: 'sm', screenWidth: 750 }

isScreenGreaterThan

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

BreakPointHelper.isScreenGreaterThan('xs');
// true

isScreenSmallerThan

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

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

Both checks compare the current viewport width with the configured pixel value. They use strict > and < comparisons.

Breakpoint Interface

type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | 'xxxl';

interface IBreakPoint {
	breakpoint: Size;
	screenWidth: number;
}