Breakpoints

breakpoints is a utility JavaScript library for breakpoints.

Samples

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 [email protected].

Copyright

Copyright (C) 2022 Creation Studio Limited.