@co4/components - npm Package Compare versions

Comparing version 0.5.1 to 0.5.2

package.json

 {
   "name": "@co4/components",
-  "version": "0.5.1",
+  "version": "0.5.2",
   "description": "The component library for the CO4 project.",
@@ -37,3 +37,3 @@ "author": {
   },
-  "gitHead": "50f2e5edfcce71972720e9f4367bbf32d261eddb"
+  "gitHead": "76e51abb61c69246e253f46907d6b409a5f245fd"
 }

src/hooks/useMediaQuery.ts

@@ -5,18 +5,22 @@ import { useEffect, useLayoutEffect, useState } from 'react';
 
-type ScreenSize =
-  | {
-      width: number;
-      height: number;
-      breakpoint: string;
-      isDown: (media: string) => boolean;
-      isUp: (media: string) => boolean;
-    }
-  | undefined;
+export interface ResponsiveScreenSize {
+  width: number;
+  height: number;
+  breakpoint: string;
+  isDown: (media: string) => boolean;
+  isUp: (media: string) => boolean;
+}
 
 const breakpoints = { xs: 0, sm: 481, md: 768, lg: 1024, xl: 1201 };
-
 const isUp = (media: string) => window.innerWidth >= breakpoints[media];
 const isDown = (media: string) => window.innerWidth <= breakpoints[media];
+const defaultScreenSize: ResponsiveScreenSize = {
+  breakpoint: 'xs',
+  height: 0,
+  width: 0,
+  isDown: () => true,
+  isUp: () => false,
+};
 
-function getScreen(): ScreenSize {
+function getScreen(): ResponsiveScreenSize {
   const breakpoint =
@@ -27,9 +31,8 @@ Object.keys(breakpoints).find(
 
-  const { innerWidth: width, innerHeight: height } = window;
-
   if (typeof window !== 'undefined' && window.screen) {
+    const { innerWidth: width, innerHeight: height } = window;
     return { width, height, breakpoint, isDown, isUp };
   }
 
-  return undefined;
+  return defaultScreenSize;
 }
@@ -36,0 +39,0 @@

No alert changes

Improved metrics

Total package byte prevSize

60469

increased by0.23%

Lines of code

1403

increased by0.36%

No dependency changes