@linear_non/stellar-kit 1.0.0

package/utils/window.js

@@ -0,0 +1,33 @@
+/**
+ * Get the current viewport dimensions (with fallback)
+ */
+export const getViewport = () => {
+  let el = window
+  let a = "inner"
+  if (!("innerWidth" in window)) {
+    a = "client"
+    el = document.documentElement || document.body
+  }
+  return { width: el[`${a}Width`], height: el[`${a}Height`] }
+}
+
+/**
+ * Get window breakpoints — should match your SCSS media queries
+ */
+export const getWindowSizes = () => {
+  return {
+    XS: window.innerWidth <= 500,
+    S: window.innerWidth <= 749,
+    S_UP: window.innerWidth >= 501,
+    M: window.innerWidth <= 1024,
+    M_UP: window.innerWidth >= 750,
+    L: window.innerWidth >= 1025,
+  }
+}
+
+/**
+ * Set --vh CSS variable for mobile 100vh workaround
+ */
+export const setViewportHeight = vh => {
+  document.documentElement.style.setProperty("--vh", `${vh}px`)
+}