See also react-break.
npm install breakjs --save
bower install breakjs -S
1. Include BreakJS
var Breakjs = ;
2. Construct your BreakJS layout object as follows:
var layout =;
3. Use the BreakJS methods to examine the layout and add event listeners:
// window width: 600pxlayout; // falselayout; // truelayout; // truelayout; // truelayout; // falselayout;
How does it work?
you a declarative way to define breakpoints and is simply an abstraction on
top of the
matchMedia browser API.
Under the hood, BreakJS constructs media queries according to the given breakpoints. In the usage example above, window width from zero to 549px equates mobile layout, 550px to 767px equates phablet layout, and so on. The highest given breakpoint will have an upper limit of Number.MAX_VALUE.
Note that if your first breakpoint is not zero, the layout methods might not work intuitively.
Out of the box, BreakJS supports Chrome 9+, Firefox 6+, IE 10+, Opera 12.1+ and Safari 5.1+.
With matchMedia polyfill BreakJS will work on almost any browser, including IE 6 and newer.
Returns the breakpoint name that matches the current layout.
Check if the current layout matches the given breakpoint.
Check if the current layout matches the given breakpoint or any wider breakpoint.
Check if the current layout matches the given breakpoint or any narrower breakpoint.
Executes the callback function when a change in the layout is detected.
Removes the change listener.
Example with React
Intended use with React:
var layout =;var myApp = React;
Why is BreakJS needed?
If you build modern single page applications, you will most likely want to display different layouts for mobile, tablet and desktop devices. Conventionally, responsiveness has been accomplished by CSS media queries. Media queries, however, do not allow you to change the layout, i.e., the order of the DOM elements. Sometimes this is fine, but if you make kick-ass applications, you probably want to create completely different layouts for mobile and desktop.