bs-breakpoints

bs-breakpoints

A plugin which detect Bootstrap 4 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 4
• Works without dependencies and jQuery
• Can work with jQuery if detected
• Detect custom breakpoints in CSS properties
• Built in UMD to be used everywhere
• Small, only 2kb and less if you gzip it

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	https://cdn.jsdelivr.net/npm/bs-breakpoints/dist/bs-breakpoints.js
jsDelivr, minified	https://cdn.jsdelivr.net/npm/bs-breakpoints/dist/bs-breakpoints.min.js

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

Vanilla JS

document.addEventListener('DOMContentLoaded', function () {
  bsBreakpoints.init()
})

With jQuery

$(document).ready(function () {
  bsBreakpoints.init()
})

Use it with npm

import bsBreakpoints from 'bs-breakpoints'

For more examples check out this file.

This library is UMD ready so you can use it everywhere.

Methods

init

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.

detectBreakpoint

Detect the current breakpoint and return it.

getCurrentBreakpoint

Return the current breakpoint.

Events

init.bs.breakpoint

Emitted just once when bsBreakpoints.init() is called.

This event contains the current breakpoint in the detail attribute in VanillaJS and for those who use jQuery we add a breakpoint key in jQuery's events.

new.bs.breakpoint

This event is emitted when there is a breakpoint changes.

This event contains the current breakpoint in the detail attribute in VanillaJS and for those who use jQuery we add a breakpoint key in jQuery's events.

Support me

If you want to thank me, you can support me and become my Patron

License

MIT