Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/johann-s/bs-breakpoints
A plugin which detect Bootstrap 5 breakpoints and emit when there is a change
https://github.com/johann-s/bs-breakpoints
bootstrap bootstrap-5 bootstrap5 breakpoint breakpoint-detection breakpoints breakpoints-plugin vanilla-javascript vanilla-js vanillajs
Last synced: 9 days ago
JSON representation
A plugin which detect Bootstrap 5 breakpoints and emit when there is a change
- Host: GitHub
- URL: https://github.com/johann-s/bs-breakpoints
- Owner: Johann-S
- License: mit
- Created: 2018-10-05T12:34:18.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2024-09-24T03:27:36.000Z (4 months ago)
- Last Synced: 2025-01-23T20:07:52.915Z (9 days ago)
- Topics: bootstrap, bootstrap-5, bootstrap5, breakpoint, breakpoint-detection, breakpoints, breakpoints-plugin, vanilla-javascript, vanilla-js, vanillajs
- Language: TypeScript
- Homepage:
- Size: 667 KB
- Stars: 23
- Watchers: 3
- Forks: 5
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# bs-breakpoints
[](https://www.npmjs.com/package/bs-breakpoints)
[](https://github.com/Johann-S/bs-breakpoints/actions?workflow=Tests)
[](https://github.com/Johann-S/bs-breakpoints/tree/master/dist/bs-breakpoints.js)
A plugin which detect Bootstrap 5 breakpoints and emit when there is a change.
You can use it on [React](https://stackblitz.com/edit/bs-breakpoints-react) and [Angular](https://stackblitz.com/edit/bs-breakpoints-angular) too because this plugin is written with the most used JavaScript framework: [VanillaJS](http://vanilla-js.com/).
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](#install)
- [How to use it](#how-to-use-it)
- [Methods](#methods)
- [Events](#events)
- [Support me](#support-me)
- [License](#license)
## Install
### With npm or yarn
```sh
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`](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`](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:
```js
document.addEventListener('DOMContentLoaded', function () {
const detector = new bsBreakpoints.BreakpointDetector();
})
```
### Use it with npm
```js
import { BreakpointDetector } from 'bs-breakpoints';
```
For UMD examples check out [this file](https://github.com/Johann-S/bs-breakpoints/blob/master/tests/index.html).
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.
```js
import { BreakpointDetector } from 'bs-breakpoints';
const detector = new BreakpointDetector();
detector.addBreakpoint('largest', { min: 1600, max: Infinity });
```
### removeBreakpoint
Allow you to remove an existing breakpoint.
```js
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](https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/detail) attribute.
### new.bs.breakpoint
This event is emitted when there is a breakpoint changes.
This event contains the current breakpoint in the [detail](https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/detail) attribute.
## License
[MIT](https://github.com/Johann-S/bs-breakpoints/blob/master/LICENSE)