react-responsive - npm Package Compare versions

Comparing version 9.0.0-beta.10 to 9.0.0

package.json

 {
   "name": "react-responsive",
   "description": "Media queries in react for responsive design",
-  "version": "9.0.0-beta.10",
+  "version": "9.0.0",
   "homepage": "http://github.com/contra/react-responsive",
@@ -45,3 +45,3 @@ "repository": {
     "@types/hyphenate-style-name": "^1.0.0",
-    "@types/jsdom": "^16.2.6",
+    "@types/jsdom": "^20.0.0",
     "@types/match-media-mock": "^0.1.5",
@@ -60,3 +60,3 @@ "@types/matchmediaquery": "^0.3.0",
     "gh-pages": "^4.0.0",
-    "jsdom": "^19.0.0",
+    "jsdom": "^20.0.0",
     "match-media-mock": "^0.1.1",
@@ -70,4 +70,4 @@ "mocha": "^10.0.0",
     "ts-node": "^10.0.0",
-    "typedoc": "^0.22.15",
-    "typescript": "^4.6.3",
+    "typedoc": "^0.23.14",
+    "typescript": "^4.8.3",
     "webpack": "^5.72.0",
@@ -74,0 +74,0 @@ "webpack-cli": "^4.9.2"

src/Component.ts

 import useMediaQuery from './useMediaQuery';
-import { ReactNode, FC, CSSProperties } from 'react';
+import { ReactNode, ReactElement, FC, CSSProperties } from 'react';
 import { MediaQueryAllQueryable, MediaQueryMatchers } from './types';
@@ -8,3 +8,3 @@
   // eslint-disable-next-line @typescript-eslint/ban-types
-  children?: ReactNode | Function;
+  children?: ReactNode | ((matches: boolean) => ReactNode);
   query?: string;
@@ -19,2 +19,3 @@ style?: CSSProperties;
 
+// ReactNode and ReactElement typings are a little funky for functional components, so the ReactElement cast is needed on the return
 const MediaQuery: FC<MediaQueryProps> = ({
@@ -29,7 +30,7 @@ children,
   if (typeof children === 'function') {
-    return children(matches);
+    return children(matches) as ReactElement;
   }
-  return matches ? children : null;
+  return matches ? children as ReactElement : null;
 };
 
 export default MediaQuery;

types/Component.d.ts

@@ -5,3 +5,3 @@ import { ReactNode, FC, CSSProperties } from 'react';
     component?: ReactNode;
-    children?: ReactNode | Function;
+    children?: ReactNode | ((matches: boolean) => ReactNode);
     query?: string;
@@ -8,0 +8,0 @@ style?: CSSProperties;

types/mediaQuery.d.ts

@@ -8,10 +8,10 @@ import PropTypes from 'prop-types';
         deviceAspectRatio: PropTypes.Requireable<string>;
-        height: PropTypes.Requireable<string | number>;
-        deviceHeight: PropTypes.Requireable<string | number>;
-        width: PropTypes.Requireable<string | number>;
-        deviceWidth: PropTypes.Requireable<string | number>;
+        height: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
+        deviceHeight: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
+        width: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
+        deviceWidth: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
         color: PropTypes.Requireable<boolean>;
         colorIndex: PropTypes.Requireable<boolean>;
         monochrome: PropTypes.Requireable<boolean>;
-        resolution: PropTypes.Requireable<string | number>;
+        resolution: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
         minAspectRatio: PropTypes.Requireable<string>;
@@ -21,10 +21,10 @@ maxAspectRatio: PropTypes.Requireable<string>;
         maxDeviceAspectRatio: PropTypes.Requireable<string>;
-        minHeight: PropTypes.Requireable<string | number>;
-        maxHeight: PropTypes.Requireable<string | number>;
-        minDeviceHeight: PropTypes.Requireable<string | number>;
-        maxDeviceHeight: PropTypes.Requireable<string | number>;
-        minWidth: PropTypes.Requireable<string | number>;
-        maxWidth: PropTypes.Requireable<string | number>;
-        minDeviceWidth: PropTypes.Requireable<string | number>;
-        maxDeviceWidth: PropTypes.Requireable<string | number>;
+        minHeight: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
+        maxHeight: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
+        minDeviceHeight: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
+        maxDeviceHeight: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
+        minWidth: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
+        maxWidth: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
+        minDeviceWidth: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
+        maxDeviceWidth: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
         minColor: PropTypes.Requireable<number>;
@@ -36,4 +36,4 @@ maxColor: PropTypes.Requireable<number>;
         maxMonochrome: PropTypes.Requireable<number>;
-        minResolution: PropTypes.Requireable<string | number>;
-        maxResolution: PropTypes.Requireable<string | number>;
+        minResolution: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
+        maxResolution: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
         all: PropTypes.Requireable<boolean>;
@@ -69,10 +69,10 @@ grid: PropTypes.Requireable<boolean>;
         deviceAspectRatio: PropTypes.Requireable<string>;
-        height: PropTypes.Requireable<string | number>;
-        deviceHeight: PropTypes.Requireable<string | number>;
-        width: PropTypes.Requireable<string | number>;
-        deviceWidth: PropTypes.Requireable<string | number>;
+        height: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
+        deviceHeight: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
+        width: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
+        deviceWidth: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
         color: PropTypes.Requireable<boolean>;
         colorIndex: PropTypes.Requireable<boolean>;
         monochrome: PropTypes.Requireable<boolean>;
-        resolution: PropTypes.Requireable<string | number>;
+        resolution: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
         type: string[];
@@ -85,10 +85,10 @@ };
         deviceAspectRatio: PropTypes.Requireable<string>;
-        height: PropTypes.Requireable<string | number>;
-        deviceHeight: PropTypes.Requireable<string | number>;
-        width: PropTypes.Requireable<string | number>;
-        deviceWidth: PropTypes.Requireable<string | number>;
+        height: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
+        deviceHeight: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
+        width: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
+        deviceWidth: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
         color: PropTypes.Requireable<boolean>;
         colorIndex: PropTypes.Requireable<boolean>;
         monochrome: PropTypes.Requireable<boolean>;
-        resolution: PropTypes.Requireable<string | number>;
+        resolution: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
         minAspectRatio: PropTypes.Requireable<string>;
@@ -98,10 +98,10 @@ maxAspectRatio: PropTypes.Requireable<string>;
         maxDeviceAspectRatio: PropTypes.Requireable<string>;
-        minHeight: PropTypes.Requireable<string | number>;
-        maxHeight: PropTypes.Requireable<string | number>;
-        minDeviceHeight: PropTypes.Requireable<string | number>;
-        maxDeviceHeight: PropTypes.Requireable<string | number>;
-        minWidth: PropTypes.Requireable<string | number>;
-        maxWidth: PropTypes.Requireable<string | number>;
-        minDeviceWidth: PropTypes.Requireable<string | number>;
-        maxDeviceWidth: PropTypes.Requireable<string | number>;
+        minHeight: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
+        maxHeight: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
+        minDeviceHeight: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
+        maxDeviceHeight: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
+        minWidth: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
+        maxWidth: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
+        minDeviceWidth: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
+        maxDeviceWidth: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
         minColor: PropTypes.Requireable<number>;
@@ -113,6 +113,6 @@ maxColor: PropTypes.Requireable<number>;
         maxMonochrome: PropTypes.Requireable<number>;
-        minResolution: PropTypes.Requireable<string | number>;
-        maxResolution: PropTypes.Requireable<string | number>;
+        minResolution: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
+        maxResolution: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
     };
 };
 export default _default;

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

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

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

220871

increased by5.78%

Number of package files

29

increased by31.82%

Lines of code

2374

increased by9.2%

Number of low quality alerts

1

decreased by-50%

No dependency changes