Simple Breakpoints

A simple breakpoints plugin based off of four simple breakpoint sizes ('mobile', 'tablet', 'small_desktop', 'large_desktop') with support to listen for breakpoint change events

Installation and usage

$ npm install simple-breakpoints --save

    import SimpleBreakpoints from 'simple-breakpoints'

    // default breakpoint sizes: { mobile: 480, tablet: 640, small_desktop: 1024, large_desktop: 1180 }
    var breakpoints = new SimpleBreakpoints();

    if(breakpoints.isMobile()) {
        // do something for mobile
    }

    if(breakpoints.isSmallDesktop()) {
        // do something for small desktop
    }

    if(breakpoints.isBetween('small_desktop', 'large_desktop')) {
        // do something between small and large desktop
    }

Listening to events

    // on all breakpoint changes
    breakpoints.on('breakpointChange', (from, to) => {
        console.log(`change from ${from} to ${to}`);
        // change from small_desktop to large_desktop
        // change from tablet to mobile
    });

    // on breakpoint changes from small to large
    breakpoints.on('breakpointChangeUp', (from, to) => {
        console.log(`change Up from ${from} to ${to}`);
        // change from small_desktop to large_desktop
    });

    // on breakpoint changes from large to small
    breakpoints.on('breakpointChangeDown', (from, to) => {
        console.log(`change Down from ${from} to ${to}`);
        // change from large_desktop to small_desktop
    });

    // remove all events from `breakpointChangeDown`
    breakpoints.off('breakpointChangeDown');

    // fire an event only once
    breakpoints.once('breakpointChange', (from, to) => {
        console.log(`firing an event ${from} to ${to} only once`);
        // change from large_desktop to small_desktop
    });

Defining your own breakpoints

    import SimpleBreakpoints from 'simple-breakpoints'

    var breakpoints = new SimpleBreakpoints({
        mobile        : 320,
        tablet        : 640,
        small_desktop : 900,
        large_desktop : 1200
    });

API

Function | Params | Description ------ | -------- | ----------- getViewportSize | | returns the viewport size as object { width: 1024, height: 768 } this is fired on window.resize and is stored in breakpoints.viewport currentBreakpoint | | returns current breakpoint size ('mobile', 'tablet', 'small_desktop', 'large_desktop') isBetween | smallBreakpoint, largeBreakpoint ('mobile', 'tablet', 'small_desktop', 'large_desktop') | Check if viewport is between two breakpoints isLessThan | breakpoint ('mobile', 'tablet', 'small_desktop', 'large_desktop') | Check if viewport is less than the width of the breakpoint isGreaterThan | breakpoint ('mobile', 'tablet', 'small_desktop', 'large_desktop') | Check if viewport is greater than the width of the breakpoint isLessThanEqualTo | breakpoint ('mobile', 'tablet', 'small_desktop', 'large_desktop') | Check if viewport is less than or equal the width of the breakpoint isGreaterThanEqualTo | breakpoint ('mobile', 'tablet', 'small_desktop', 'large_desktop') | Check if viewport is greater than or equal the width of the breakpoint isMobile | | Check if the viewport is within the mobile breakpoint isTablet | | Check if the viewport is within the tablet breakpoint isSmallDesktop | | Check if the viewport is within the small_desktop breakpoint isLargeDesktop | | Check if the viewport is within the large_desktop breakpoint on (event, callback) | ('breakpointChange' | 'breakpointChangeUp' | 'breakpointChangeDown', callback(from, to)) | watch for changes on breakpoints with and fire a callback once (event, callback) | ('breakpointChange' | 'breakpointChangeUp' | 'breakpointChangeDown', callback(from, to)) | watch for changes on breakpoints with and fire a callback only once off (event) | ('breakpointChange' | 'breakpointChangeUp' | 'breakpointChangeDown')| Remove event listener for breakpoint change

For using with Vue.js, see vue-simple-breakpoints