bs-breakpoints

bs-breakpoints

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

Table of contents

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

Install

With npm or yarn

npm install bs-breakpoints --save

// yarn
yarn add bs-breakpoints

CDN

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

How to use it

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();
})

Use it with npm

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.

Methods

constructor

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.

addBreakpoint

Allow you to add a new breakpoint.

import { BreakpointDetector } from 'bs-breakpoints';

const detector = new BreakpointDetector();

detector.addBreakpoint('largest', { min: 1600, max: Infinity });

removeBreakpoint

Allow you to remove an existing breakpoint.

import { BreakpointDetector } from 'bs-breakpoints';

const detector = new BreakpointDetector();

detector.removeBreakpoint('largest');

getBreakPoints

Detect and update breakpoints base on CSS properties

getCurrentBreakpoint

Detect and return the current breakpoint.

isGreaterThan

Allow you to know if the current breakpoint is greater than the one supplied.

isLowerThan

Allow you to know if the current breakpoint is lower than the one supplied.

Events

init.bs.breakpoint

Emitted just once when a new instance of BreakpointDetector is created.

This event contains the current breakpoint in the detail attribute.

new.bs.breakpoint

This event is emitted when there is a breakpoint changes.

This event contains the current breakpoint in the detail attribute.

License

MIT

Changelog

2.1.0 (2024-08-01)

Features

• ci: add coveralls (4614ab7)
• core: allow to know if gt or lt compare to current breakpoint (bb7ac56)
• testing: use vitest to do some unit tests (a186f8b)

Bug Fixes

• build: use tsc to typecheck not to build (58ac0bc)
• coverage: add reporters (5beb382)
• package: change bootstrap support (2d7bf23)