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

• Install
• How to use it
• Methods
• Events
• Support me
• License

npm install bs-breakpoints --save

// yarn
yarn add bs-breakpoints

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.

MIT