use-media - npm Package Compare versions

Comparing version 0.1.1 to 1.0.0

lib/index.d.ts

@@ -1,1 +0,5 @@
-export declare const useMedia: (query: string, defaultState?: boolean) => any;
+declare type MediaQueryObject = {
+    [key: string]: string | number | boolean;
+};
+export declare const useMedia: (rawQuery: string | MediaQueryObject, defaultState?: boolean) => boolean;
+export {};

lib/index.js

@@ -5,4 +5,22 @@ "use strict";
 const { useState, useEffect } = React;
-exports.useMedia = (query, defaultState = false) => {
+const camelToHyphen = (str) => str.replace(/[A-Z]/g, m => `-${m.toLowerCase()}`).toLowerCase();
+const objectToString = (query) => {
+    if (typeof query === 'string')
+        return query;
+    return Object.entries(query)
+        .map(([feature, value]) => {
+        feature = camelToHyphen(feature);
+        if (typeof value === 'boolean') {
+            return value ? feature : `not ${feature}`;
+        }
+        if (typeof value === 'number' && /[height|width]$/.test(feature)) {
+            value = `${value}px`;
+        }
+        return `(${feature}: ${value})`;
+    })
+        .join(' and ');
+};
+exports.useMedia = (rawQuery, defaultState = false) => {
     const [state, setState] = useState(defaultState);
+    const query = objectToString(rawQuery);
     useEffect(() => {
@@ -9,0 +27,0 @@ let mounted = true;

package.json

 {
   "name": "use-media",
-  "version": "0.1.1",
+  "version": "1.0.0",
   "description": "useMedia React hook",
@@ -12,2 +12,3 @@ "main": "lib/index.js",
   "scripts": {
+    "test": "echo 'hmmmm....'",
     "build": "tsc",
@@ -26,14 +27,13 @@ "release": "semantic-release"
   "homepage": "https://github.com/streamich/use-media#readme",
-  "dependencies": {
-  },
+  "dependencies": {},
   "devDependencies": {
-    "semantic-release": "^15.10.6",
-    "@semantic-release/changelog": "^3.0.1",
-    "@semantic-release/npm": "^5.0.5",
-    "@semantic-release/git": "^7.0.5",
-    "typescript": "^3.1.3",
-    "react": "*"
+    "@semantic-release/changelog": "^3.0.2",
+    "@semantic-release/git": "^7.0.8",
+    "@semantic-release/npm": "^5.1.4",
+    "@types/react": "^16.8.2",
+    "semantic-release": "^15.13.3",
+    "typescript": "^3.1.3"
   },
   "peerDependencies": {
-    "react": "*"
+    "react": "^16.8.1"
   },
@@ -40,0 +40,0 @@ "config": {

README.md

@@ -12,3 +12,6 @@ # use-media
 const Demo = () => {
-  const isWide = useMedia('(min-width: 1000px)');
+  // Accepts an object of features to test
+  const isWide = useMedia({ minWidth: 1000 });
+  // Or a regular media query string
+  const reduceMotion = useMedia('(prefers-reduced-motion: reduce)');
 
@@ -15,0 +18,0 @@ return (

Fixed alerts

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

3640

increased by59.72%

Number of package files

5

increased by25%

Lines of code

46

increased by91.67%

Number of low quality alerts

0

decreased by-100%

Number of lines in readme file

24

increased by14.29%

No dependency changes