Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

simple-breakpoints

drewjbartlett787ISC1.1.3

A simple js plugin to define conditionally check defined breakpoints

breakpoints, js, mobile, vue

readme

Simple Breakpoints

npm npm

A simple breakpoints plugin based off of four simple breakpoint sizes (`'mobile', 'tablet', 'smalldesktop', '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'
once (event, callback) (`'breakpointChange' 'breakpointChangeUp'
off (event) (`'breakpointChange' 'breakpointChangeUp'

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