0.1.6 • Published 5 years ago
breakpoint-detection v0.1.6
breakpoint-detection 💔
Pure Javascript breakpoint detection for Bootstrap 4.
Heavily inpsired on Maciej Gurban's Responsive Bootstrap Toolkit, even uses some of the same code, but I needed a version without jQuery dependency.
How is this different?
- No jQuery dependency. I use Bootstrap without the javascript side of it, which depends on jQuery. As such, Maciej Gurban's Responsive Bootstrap Toolkit depends on jQuery itself. I needed a version without that dependency.
- It is a stripped down version. It has no EventListeners for example, which gives you more control, but also means you have to take care of it yourself (calling the plugin, debouncing the calls).
- It has some of the same methods as the above mentioned plugin, like
is
andchanged
. Onlychanged
checks the inserted dummy divs for visibility, andis
uses the stored result ofchanged
. Because checking the divs for visibility is the most resource heavy action,is
is much more lightweight. As a result though, we have to useis
inside the callback function fromchanged
(see 'Usage'), so we're sure the visibility has been checked. - Checking the dummy divs for visibility starts at the smallest breakpoint. Because only one element is visible at a time at any breakpoint, the loop breaks, giving a little performance boost which mobile benefits the most from.
Usage
Example in ES6 as I use it this way but it should work with common js as well. Using a debounce function is highly recommended, you don't want to call the changed
method too often. The example uses the one from lodash, with a debounce time of 250 milliseconds.
import viewport from 'breakpoint-detection';
import { debounce } from 'lodash';
document.addEventListener("DOMContentLoaded", () => {
// Initialize with framework name. Only supports bootstrap for now.
viewport.init('bootstrap');
window.addEventListener('resize', debounce(() => {
viewport.changed(() => {
// Only gets called when the breakpoint changes
if (viewport.is('<=sm')) {
// Do mobile stuff
} else {
// Do other stuff
}
});
}, 250);
});
Copyright and license
Aw yiss, code released under MIT License. Have at it 🤘.