UiBreakpoint

A simple, configurable breakpoint class for any Web project.

Features ✨

• Optimized for perfomance (uses media queries).
• Works with any JavaScript project.
• Add multiple defined breakpoints eg sm, mobile, etc.
• Supports orientation.

Config ⚙

The UiBreakpoint requires a single object as an argument when initializing. The properties are listed below.

Key	Type	Description	Example	Tip
config	Object	Key, Value pair of name of breakpoint, and minimum px it can have. The next biggest breakpoint will automatically be the maximum px it can have. The highest value in this object won't have a max-width query. This object can be in any order, as it'll be sorted by value (ASC)	{ config: { xs: 0, sm: 560, md: 960, lg: 1200, xl: 1800, cinema: 4000 } }	Always use 0 as the minimum breakpoint.
useOrientation	Boolean	Tell UiBreakpoint to check for orientation or not.	{ ..., useOrientation: true }	It's false by default
onChange	Function	A callback function that fires whenever there's a change in breakpoint. This could also mean there's a change in orientation if useOrientation is true	{ ..., onChange: e => { console.log(e); } }	If you're using a framework like Vue, or React, you can utilize this hook to update your Global state.

Example 💁‍♀️

const screenSizes = {
  xxs: 0,
  xs: 320,
  sm: 560,
  md: 960,
  lg: 1020,
  xl: 1920
}  

const breakpoint = new UiBreakpoint({
  config: screenSizes,
  useOrientation: true,
  onChange: e => {
    const isMobile = /xxs|xs|sm/.test(e.is);
    
    if(e.orientation == 'landscape' && isMobile){
      alert('Only portrait mode supported!')
    } 
    
    // this is where you update your store to have the breakpoint globally accessible
    // for framework lovers only.
  }  
})

Actually, thats all about the breakpoint API.

Ciao 👋