@homebound/beam 2.202.1 → 2.203.0

package/dist/hooks/index.d.ts

@@ -1,3 +1,4 @@
+export * from "./useBreakpoint";
 export * from "./useComputed";
 export * from "./useGroupBy";
 export * from "./useHover";

package/dist/hooks/index.js

@@ -10,6 +10,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./useBreakpoint"), exports);
 __exportStar(require("./useComputed"), exports);
 __exportStar(require("./useGroupBy"), exports);
 __exportStar(require("./useHover"), exports);

package/dist/hooks/useBreakpoint.d.ts

@@ -0,0 +1,11 @@
+import { BreakpointKey } from "../Css";
+/**
+ * A React hook to return a record of responsive breakpoints that updates on resize.
+ *
+ * @example
+ * const { breakpoints } = useBreakpoint();
+ * if(breakpoints.mdAndDown) {...do something cool}
+ */
+declare type BreakpointsType = Record<BreakpointKey, boolean>;
+export declare const useBreakpoint: () => BreakpointsType;
+export {};

package/dist/hooks/useBreakpoint.js

@@ -0,0 +1,33 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useBreakpoint = void 0;
+const fast_deep_equal_1 = __importDefault(require("fast-deep-equal"));
+const react_1 = require("react");
+const use_debounce_1 = require("use-debounce");
+const Css_1 = require("../Css");
+const useBreakpoint = () => {
+    const [breakpoints, setBreakpoints] = (0, react_1.useState)(matchMediaBreakpoints());
+    const handleResize = (0, use_debounce_1.useDebouncedCallback)(() => {
+        const newBps = matchMediaBreakpoints();
+        if ((0, fast_deep_equal_1.default)(breakpoints, newBps))
+            return;
+        setBreakpoints(newBps);
+    }, 1000);
+    (0, react_1.useEffect)(() => {
+        window.addEventListener("resize", handleResize);
+        // Remove event listener on cleanup
+        return () => window.removeEventListener("resize", handleResize);
+    }, []);
+    return breakpoints;
+};
+exports.useBreakpoint = useBreakpoint;
+function matchMediaBreakpoints() {
+    let bps = {};
+    Object.entries(Css_1.Breakpoints).forEach(([name, bp]) => {
+        bps[name] = window.matchMedia(bp.replace("@media ", "")).matches;
+    });
+    return bps;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@homebound/beam",
-  "version": "2.202.1",
+  "version": "2.203.0",
   "author": "Homebound",
   "license": "MIT",
   "main": "dist/index.js",