Breakpoints
breakpoints
is a utility JavaScript library for breakpoints.
Introduction
Installation
Yarn
yarn add @pluginjs/breakpoints
NPM
npm i @pluginjs/breakpoints
Getting Started
CDN:
Development:
<script src="https://unpkg.com/@pluginjs/breakpoints/dist/breakpoints.js"></script>
Production:
<script src="https://unpkg.com/@pluginjs/breakpoints/dist/breakpoints.min.js"></script>
Initialize
HTML:
ECMAScript Module:
import Breakpoints from "@pluginjs/breakpoints"
Breakpoints();
CommonJS:
const Breakpoints = require("@pluginjs/breakpoints")
Breakpoints();
Browser:
<script src="https://unpkg.com/@pluginjs/breakpoints/dist/breakpoints.js"></script>
<script>
Breakpoints();
</script>
Defaults
It will use the bootstrap media query breakpoints by default:
Breakpoints.defaults = {
// Extra small devices (portrait phones, less than 576px)
xs: {
min: 0,
max: 575
},
// Small devices (landscape phones, 576px and up)
sm: {
min: 576,
max: 767
},
// Medium devices (tablets, 768px and up)
md: {
min: 768,
max: 991
},
// Large devices (desktops, 992px and up)
lg: {
min: 992,
max: 1199
},
// Extra large devices (large desktops, 1200px and up)
xl: {
min: 1200,
max: Infinity
}
};
You can set up your own breakpoints when initialize it:
<script type="text/javascript">
Breakpoints({
mobile: {
min: 0,
max: 767
},
tablet: {
min: 768,
max: 991
},
destop: {
min: 992,
max: Infinity
}
});
</script>
Methods
is
Check if the current screen is a specific size.
Breakpoints.is('xs'); // is current screen is xs size
Breakpoints.is('md+'); // is current screen is md size and larger
Breakpoints.is('sm-'); // is current screen is sm size and smaller
Breakpoints.is('sm-md'); // is current screen is between sm and md size
get
Return the size object that you can operate it handily.
// get size object
var sm = Breakpoints.get('sm');
// attach events
sm.on('enter', function(){
// do something
});
// remove event handler
sm.off('enter');
// get min width
sm.min // 768
// get max width
sm.max // 991
// get media query
sm.media // "(min-width: 768px) and (max-width: 991px)"
// check if it's current size
sm.isMatched(); // true or false
// you can do in a chain
Breakpoints.get('sm').on({
enter: function(){
},
leave: function(){
}
});
current
Return the current screen size object
Breakpoints.current();
on
Attach an event handler function for one or more events to the size
Breakpoints.on('md', {
enter: function() {
console.info('enter '+ this.name);
},
leave: function() {
console.info('leave '+ this.name);
}
});
Breakpoints.on('lg', 'enter', function(){
console.info('hello lg');
});
Passing data to the callback
Breakpoints.on('sm', 'enter', {
name: "Addy"
}, function(data) {
console.info(data.name + ' enter '+ this.name);
});
Breakpoints.on('sm', 'leave', {
name: "Karl"
}, function(data) {
console.info(data.name + ' leave '+ this.name);
});
one
The handler attached to the size will executed at most once.
Breakpoints.one('md', 'enter', function(){
console.info('this only appear once when enter md');
});
off
Remove event handlers attached to size.
// remove all events attached to sm size
Breakpoints.off('sm');
// remove all enter type events attached to md size
Breakpoints.off('md', 'enter');
// remove specific event handler
var enterHandler = function(){};
Breakpoints.on('lg', 'enter', enterHandler);
Breakpoints.off('lg', {
enter: enterHandler
})
// alternative way
Breakpoints.off('lg', 'enter', enterHandler);
change
Attach an event handler to the size change event
// attach handler to change event
Breakpoints.on('change', function(){
console.info('enter ' + this.current.name);
});
// altrnative example
var changeHandler = function(){
// do something
};
Breakpoints.on('change', changeHandler);
// remove the handler
Breakpoints.off('change', changeHandler);
// remove all change handlers
Breakpoints.off('change');
At
Attach an event handler function for the screen at a specific size
Breakpoints.at('md', {
enter: function() {
console.info('enter '+ this.name);
},
leave: function() {
console.info('leave '+ this.name);
}
});
Breakpoints.at('md', 'enter', function(){
console.info('enter '+ this.name);
});
Breakpoints.on('md', 'enter', function(){
console.info('enter '+ this.name);
});
Breakpoints.off('md', 'enter');
From
Attach an event handler function for the screen width is inside a specific size or larger
Breakpoints.from('md', {
enter: function() {
console.info('enter md+');
},
leave: function() {
console.info('leave md+');
}
});
Breakpoints.from('md', 'enter', function(){
console.info('enter md+');
});
Breakpoints.on('md+', 'enter', function(){
console.info('enter md+');
});
Breakpoints.off('md+', 'enter');
To
Attach an event handler function for the screen width is inside a specific size or smaller
Breakpoints.to('md', {
enter: function() {
console.info('enter md-');
},
leave: function() {
console.info('leave md-');
}
});
Breakpoints.to('md', 'enter', function(){
console.info('enter md-');
});
Breakpoints.on('md-', 'enter', function(){
console.info('enter md-');
});
Breakpoints.off('md-', 'enter');
Between
Attach an event handler function for the screen width is inside two specific size
Breakpoints.between('md', 'lg', {
enter: function() {
console.info('enter md-lg');
},
leave: function() {
console.info('leave md-lg');
}
});
Breakpoints.between('md', 'lg', 'enter', function(){
console.info('enter md-lg');
});
Breakpoints.on('md-lg', 'enter', function(){
console.info('enter md-');
});
Breakpoints.off('md-lg', 'enter');
Browser support
Tested on all major browsers.
IE / Edge | Firefox | Chrome | Safari | Opera |
---|---|---|---|---|
IE11, Edge | last 2 versions | last 2 versions | last 2 versions | last 2 versions |
License
@pluginjs/breakpoints is Licensed under the GPL-v3 license.
If you want to use @pluginjs/breakpoints project to develop commercial sites, themes, projects, and applications, the Commercial license is the appropriate license. With this option, your source code is kept proprietary.
For purchase an Commercial License, contact us purchase@thecreation.co.
Copyright
Copyright (C) 2022 Creation Studio Limited.