{"id":14972399,"url":"https://github.com/johann-s/bs-breakpoints","last_synced_at":"2025-04-13T01:12:59.273Z","repository":{"id":37743305,"uuid":"151718124","full_name":"Johann-S/bs-breakpoints","owner":"Johann-S","description":"A plugin which detect Bootstrap 5 breakpoints and emit when there is a change","archived":false,"fork":false,"pushed_at":"2024-09-24T03:27:36.000Z","size":683,"stargazers_count":24,"open_issues_count":4,"forks_count":5,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-13T01:12:43.377Z","etag":null,"topics":["bootstrap","bootstrap-5","bootstrap5","breakpoint","breakpoint-detection","breakpoints","breakpoints-plugin","vanilla-javascript","vanilla-js","vanillajs"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Johann-S.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"patreon":"jservoire","liberapay":"Johann-S","custom":"https://www.paypal.me/jservoire"}},"created_at":"2018-10-05T12:34:18.000Z","updated_at":"2025-04-02T06:39:26.000Z","dependencies_parsed_at":"2024-06-20T23:27:35.400Z","dependency_job_id":"e47e47e6-4e9a-4aa9-9c0a-00af839d1e49","html_url":"https://github.com/Johann-S/bs-breakpoints","commit_stats":{"total_commits":67,"total_committers":3,"mean_commits":"22.333333333333332","dds":"0.31343283582089554","last_synced_commit":"0fae1164d526bafe338c85853a64071589181ed3"},"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Johann-S%2Fbs-breakpoints","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Johann-S%2Fbs-breakpoints/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Johann-S%2Fbs-breakpoints/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Johann-S%2Fbs-breakpoints/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Johann-S","download_url":"https://codeload.github.com/Johann-S/bs-breakpoints/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248650754,"owners_count":21139681,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["bootstrap","bootstrap-5","bootstrap5","breakpoint","breakpoint-detection","breakpoints","breakpoints-plugin","vanilla-javascript","vanilla-js","vanillajs"],"created_at":"2024-09-24T13:46:51.724Z","updated_at":"2025-04-13T01:12:59.247Z","avatar_url":"https://github.com/Johann-S.png","language":"TypeScript","funding_links":["https://patreon.com/jservoire","https://liberapay.com/Johann-S","https://www.paypal.me/jservoire"],"categories":[],"sub_categories":[],"readme":"# bs-breakpoints\n\n[![npm version](https://img.shields.io/npm/v/bs-breakpoints.svg)](https://www.npmjs.com/package/bs-breakpoints)\n[![Build Status](https://github.com/Johann-S/bs-breakpoints/workflows/Tests/badge.svg)](https://github.com/Johann-S/bs-breakpoints/actions?workflow=Tests)\n![Coveralls](https://img.shields.io/coverallsCoverage/github/Johann-S/bs-breakpoints)\n[![JS gzip size](https://img.badgesize.io/Johann-S/bs-breakpoints/master/dist/bs-breakpoints.js?compression=gzip\u0026label=JS+gzip+size)](https://github.com/Johann-S/bs-breakpoints/tree/master/dist/bs-breakpoints.js)\n\nA plugin which detect Bootstrap 5 breakpoints and emit when there is a change.\n\nYou 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/).\n\nFeatures:\n\n- Works with Bootstrap 5\n- Works without *dependencies*\n- Detect custom breakpoints in CSS properties\n- Built in **ES** and **UMD** to be used everywhere\n- Small, only **2kb** and less if you gzip it\n- Allow to add or remove breakpoints\n\n## Table of contents\n\n- [Install](#install)\n- [How to use it](#how-to-use-it)\n- [Methods](#methods)\n- [Events](#events)\n- [Support me](#support-me)\n- [License](#license)\n\n## Install\n\n### With npm or yarn\n\n```sh\nnpm install bs-breakpoints --save\n\n// yarn\nyarn add bs-breakpoints\n```\n\n### CDN\n\nCDN | Link\n------------ | -------------\njsDelivr ES version | [`https://cdn.jsdelivr.net/npm/bs-breakpoints/dist/bs-breakpoints.js`](https://cdn.jsdelivr.net/npm/bs-breakpoints/dist/bs-breakpoints.js)\njsDelivr 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)\n\n## How to use it\n\nYou should wait for the document ready event and call the `init` method to detect breakpoint changes.\nWe expose one global variable available everywhere: `bsBreakpoints`\n\nIn browser with UMD version:\n```js\ndocument.addEventListener('DOMContentLoaded', function () {\n  const detector = new bsBreakpoints.BreakpointDetector();\n})\n```\n\n### Use it with npm\n\n```js\nimport { BreakpointDetector } from 'bs-breakpoints';\n```\n\nFor UMD examples check out [this file](https://github.com/Johann-S/bs-breakpoints/blob/master/tests/index.html).\n\nThis library is ES and UMD ready so you can use it everywhere.\n\n## Methods\n\n### constructor\n\nWill detect the current breakpoint and emit `init.bs.breakpoint` event.\n\nIt'll add a listener on the window `resize` event and emit `new.bs.breakpoint` event.\n\n### addBreakpoint\n\nAllow you to add a new breakpoint.\n\n```js\nimport { BreakpointDetector } from 'bs-breakpoints';\n\nconst detector = new BreakpointDetector();\n\ndetector.addBreakpoint('largest', { min: 1600, max: Infinity });\n```\n\n### removeBreakpoint\n\nAllow you to remove an existing breakpoint.\n\n```js\nimport { BreakpointDetector } from 'bs-breakpoints';\n\nconst detector = new BreakpointDetector();\n\ndetector.removeBreakpoint('largest');\n```\n\n### getBreakPoints\n\nDetect and update breakpoints base on CSS properties\n\n### getCurrentBreakpoint\n\nDetect and return the current breakpoint.\n\n### isGreaterThan\n\nAllow you to know if the current breakpoint is greater than the one supplied.\n\n### isLowerThan\n\nAllow you to know if the current breakpoint is lower than the one supplied.\n\n## Events\n\n### init.bs.breakpoint\n\nEmitted just once when a new instance of `BreakpointDetector` is created.\n\nThis event contains the current breakpoint in the [detail](https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/detail) attribute.\n\n### new.bs.breakpoint\n\nThis event is emitted when there is a breakpoint changes.\n\nThis event contains the current breakpoint in the [detail](https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/detail) attribute.\n\n## License\n\n[MIT](https://github.com/Johann-S/bs-breakpoints/blob/master/LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjohann-s%2Fbs-breakpoints","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjohann-s%2Fbs-breakpoints","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjohann-s%2Fbs-breakpoints/lists"}