@aboutbits/react-toolbox - npm Package Compare versions

Comparing version 0.1.1 to 0.1.2

dist/esm/index.d.ts

@@ -5,2 +5,3 @@ import { useInterval } from './useInterval/useInterval';
 import { LocationProvider, LocationContext, LocationContextValue } from './location-provider/LocationProvider';
-export { useInterval, AsyncState, getAsyncState, AsyncView, LocationProvider, LocationContext, LocationContextValue, };
+import { useMatchMediaQuery } from './useMatchMediaQuery/useMatchMediaQuery';
+export { useInterval, AsyncState, getAsyncState, AsyncView, LocationProvider, LocationContext, LocationContextValue, useMatchMediaQuery, };

dist/esm/index.js

@@ -5,2 +5,3 @@ import { useInterval } from './useInterval/useInterval';
 import { LocationProvider, LocationContext, } from './location-provider/LocationProvider';
-export { useInterval, AsyncState, getAsyncState, AsyncView, LocationProvider, LocationContext, };
+import { useMatchMediaQuery } from './useMatchMediaQuery/useMatchMediaQuery';
+export { useInterval, AsyncState, getAsyncState, AsyncView, LocationProvider, LocationContext, useMatchMediaQuery, };

dist/index.d.ts

@@ -5,2 +5,3 @@ import { useInterval } from './useInterval/useInterval';
 import { LocationProvider, LocationContext, LocationContextValue } from './location-provider/LocationProvider';
-export { useInterval, AsyncState, getAsyncState, AsyncView, LocationProvider, LocationContext, LocationContextValue, };
+import { useMatchMediaQuery } from './useMatchMediaQuery/useMatchMediaQuery';
+export { useInterval, AsyncState, getAsyncState, AsyncView, LocationProvider, LocationContext, LocationContextValue, useMatchMediaQuery, };

dist/index.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.LocationContext = exports.LocationProvider = exports.AsyncView = exports.getAsyncState = exports.AsyncState = exports.useInterval = void 0;
+exports.useMatchMediaQuery = exports.LocationContext = exports.LocationProvider = exports.AsyncView = exports.getAsyncState = exports.AsyncState = exports.useInterval = void 0;
 var useInterval_1 = require("./useInterval/useInterval");
@@ -14,2 +14,4 @@ Object.defineProperty(exports, "useInterval", { enumerable: true, get: function () { return useInterval_1.useInterval; } });
 Object.defineProperty(exports, "LocationContext", { enumerable: true, get: function () { return LocationProvider_1.LocationContext; } });
+var useMatchMediaQuery_1 = require("./useMatchMediaQuery/useMatchMediaQuery");
+Object.defineProperty(exports, "useMatchMediaQuery", { enumerable: true, get: function () { return useMatchMediaQuery_1.useMatchMediaQuery; } });
 //# sourceMappingURL=index.js.map

package.json

 {
   "name": "@aboutbits/react-toolbox",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "Tools for React",
@@ -48,2 +48,3 @@ "main": "dist/index.js",
     "@testing-library/react-hooks": "^5.1.1",
+    "@types/css-mediaquery": "^0.1.1",
     "@types/jest": "^26.0.22",
@@ -53,2 +54,3 @@ "@types/react": "^17.0.3",
     "@typescript-eslint/parser": "^4.21.0",
+    "css-mediaquery": "^0.1.2",
     "eslint": "^7.23.0",
@@ -55,0 +57,0 @@ "eslint-config-prettier": "^8.1.0",

readme.md

@@ -15,2 +15,3 @@ React Toolbox
   - [LocationProvider](#locationprovider)
+  - [useMatchMediaQuery](#usematchmediaquery)
 - [Build & Publish](#build--publish)
@@ -153,2 +154,16 @@ - [Information](#information)
 
+### useMatchMediaQuery
+
+This hook is based on the `window.matchQuery` API and can be used to find out if a certain media query matches the current window.
+
+```tsx
+import { useMatchMediaQuery } from '@aboutbits/react-toolbox'
+
+const TestComponent = () => {
+  const matches = useMatchMediaQuery('(min-width : 500px)')
+  if (matches) return <div>visible</div>
+  return null
+}
+```
+
 ## Build & Publish
@@ -155,0 +170,0 @@

No alert changes

Improved metrics

Total package byte prevSize

31760

increased by14.24%

Number of package files

43

increased by13.16%

Lines of code

413

increased by14.4%

Number of lines in readme file

194

increased by8.38%

Worsened metrics

Dev dependency count

20

increased by11.11%

No dependency changes