simple-breakpoints

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

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