https://github.com/c4benni/ui-breakpoint
A simple, configurable breakpoint class for any Web project.
https://github.com/c4benni/ui-breakpoint
breakpoint breakpoints dom-manipulation react typescript vue
Last synced: about 1 month ago
JSON representation
A simple, configurable breakpoint class for any Web project.
- Host: GitHub
- URL: https://github.com/c4benni/ui-breakpoint
- Owner: c4benni
- Created: 2022-01-14T21:07:59.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2022-06-18T11:43:09.000Z (almost 4 years ago)
- Last Synced: 2025-06-17T05:18:06.863Z (12 months ago)
- Topics: breakpoint, breakpoints, dom-manipulation, react, typescript, vue
- Language: TypeScript
- Homepage:
- Size: 34.2 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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 💁♀️
````js
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 👋