bootstrap-detect-breakpoint - npm Package Compare versions

Comparing version 1.0.8 to 1.1.0

package.json

 {
   "name": "bootstrap-detect-breakpoint",
-  "version": "1.0.8",
-  "description": "Detect the current Bootstrap 4 breakpoint in JavaScript",
+  "version": "1.1.0",
+  "description": "Detect the current Bootstrap breakpoint in JavaScript",
   "main": "index.js",
@@ -6,0 +6,0 @@ "scripts": {

README.md

 # bootstrap-detect-breakpoint
 
-Detect the current Bootstrap 4 breakpoint in JavaScript.
+Detect the current Bootstrap breakpoint in JavaScript.
 
@@ -32,1 +32,14 @@ - [Demo Page](https://shaack.com/projekte/bootstrap-detect-breakpoint/)
 The index goes from 0 to 4, where 0 is "xs" and 4 is for "xl".
+
+## Get it working with Bootstrap 5
+
+In Bootstrap 5 there is an [issue that the css variables for breakpoints are missing](https://github.com/twbs/bootstrap/issues/36094). I already created a [pull request](https://github.com/twbs/bootstrap/pull/36095), but I don't know when it will be merged.
+
+You can make this script work with just adding this to your scss
+```scss
+@each $name, $value in $grid-breakpoints {
+  --#{$prefix}breakpoint-#{$name}: #{$value};
+}
+```
+
+

src/bootstrap-detect-breakpoint.js

 const bootstrapDetectBreakpoint = function () {
     // cache some values on first call
     if (!this.breakpointValues) {
-        this.breakpointNames = ["xl", "lg", "md", "sm", "xs"]
+        this.breakpointNames = ["xxl", "xl", "lg", "md", "sm", "xs"]
         this.breakpointValues = []
+        const isPriorBS5 = !!window.getComputedStyle(document.documentElement).getPropertyValue('--breakpoint-sm')
+        const selector = isPriorBS5 ? "--breakpoint-" : "--bs-breakpoint-"
         for (const breakpointName of this.breakpointNames) {
-            this.breakpointValues[breakpointName] = window.getComputedStyle(document.documentElement).getPropertyValue('--breakpoint-' + breakpointName)
+            const value = window.getComputedStyle(document.documentElement).getPropertyValue(selector + breakpointName)
+            if(value) {
+                this.breakpointValues[breakpointName] = value
+            }
         }
@@ -18,2 +23,2 @@ }
     return null
-}
+}

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Native code

Supply chain risk

Contains native code (e.g., compiled binaries or shared libraries). Including native code can obscure malicious behavior.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

19837

increased by441.26%

Number of package files

6

increased by20%

Lines of code

23

increased by35.29%

Number of lines in readme file

45

increased by40.63%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes