A plugin which detect Bootstrap 5 breakpoints and emit when there is a change.
You can use it on React and Angular too because this plugin is written with the most used JavaScript framework: VanillaJS.
Features:
- Works with Bootstrap 5
- Works without dependencies
- Detect custom breakpoints in CSS properties
- Built in ES and UMD to be used everywhere
- Small, only 2kb and less if you gzip it
- Allow to add or remove breakpoints
npm install bs-breakpoints --save
// yarn
yarn add bs-breakpoints
CDN | Link |
---|---|
jsDelivr ES version | https://cdn.jsdelivr.net/npm/bs-breakpoints/dist/bs-breakpoints.js |
jsDelivr UMD version | https://cdn.jsdelivr.net/npm/bs-breakpoints/dist/bs-breakpoints.umd.cjs |
You should wait for the document ready event and call the init
method to detect breakpoint changes.
We expose one global variable available everywhere: bsBreakpoints
In browser with UMD version:
document.addEventListener('DOMContentLoaded', function () {
const detector = new bsBreakpoints.BreakpointDetector();
})
import { BreakpointDetector } from 'bs-breakpoints';
For UMD examples check out this file.
This library is ES and UMD ready so you can use it everywhere.
Will detect the current breakpoint and emit init.bs.breakpoint
event.
It'll add a listener on the window resize
event and emit new.bs.breakpoint
event.
Allow you to add a new breakpoint.
import { BreakpointDetector } from 'bs-breakpoints';
const detector = new BreakpointDetector();
detector.addBreakpoint('largest', { min: 1600, max: Infinity });
Allow you to remove an existing breakpoint.
import { BreakpointDetector } from 'bs-breakpoints';
const detector = new BreakpointDetector();
detector.removeBreakpoint('largest');
Detect and update breakpoints base on CSS properties
Detect and return the current breakpoint.
Allow you to know if the current breakpoint is greater than the one supplied.
Allow you to know if the current breakpoint is lower than the one supplied.
Emitted just once when a new instance of BreakpointDetector
is created.
This event contains the current breakpoint in the detail attribute.
This event is emitted when there is a breakpoint changes.
This event contains the current breakpoint in the detail attribute.