feat: object syntax

Allow media query to be an object

Author: streamich

README.md

@@ -9,7 +9,10 @@
 import {useMedia} from '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)');
 
   return (
     <div>

package.json

@@ -22,17 +22,17 @@
     "url": "https://github.com/streamich/use-media/issues"
   },
   "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",
+    "@semantic-release/npm": "^5.0.5",
+    "@types/react": "^16.8.2",
+    "semantic-release": "^15.10.6",
     "typescript": "^3.1.3"
   },
   "peerDependencies": {
-    "react": "*"
+    "react": "^16.8.1"
   },
   "config": {
     "commitizen": {

src/index.ts

@@ -1,10 +1,34 @@
 import * as React from 'react';
 
-const {useState, useEffect} = React as any;
+const { useState, useEffect } = React;
 
-export const useMedia = (query: string, defaultState: boolean = false) => {
-  const [state, setState] = useState(defaultState);
+type MediaQueryObject = { [key: string]: string | number | boolean };
+
+const camelToHyphen = (str: string) =>
+  str.replace(/[A-Z]/g, m => `-${m.toLowerCase()}`).toLowerCase();
 
+const objectToString = (query: string | MediaQueryObject) => {
+  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 ');
+};
+
+export const useMedia = (
+  rawQuery: string | MediaQueryObject,
+  defaultState: boolean = false
+) => {
+  const [state, setState] = useState(defaultState);
+  const query = objectToString(rawQuery);
   useEffect(() => {
     let mounted = true;
     const mql = window.matchMedia(query);

yarn.lock

@@ -131,6 +131,19 @@
     into-stream "^4.0.0"
     lodash "^4.17.4"
 
+"@types/prop-types@*":
+  version "15.5.8"
+  resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.5.8.tgz#8ae4e0ea205fe95c3901a5a1df7f66495e3a56ce"
+  integrity sha512-3AQoUxQcQtLHsK25wtTWIoIpgYjH3vSDroZOUr7PpCHw/jLY1RB9z9E8dBT/OSmwStVgkRNvdh+ZHNiomRieaw==
+
+"@types/react@^16.8.2":
+  version "16.8.2"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-16.8.2.tgz#3b7a7f7ea89d1c7d68b00849fb5de839011c077b"
+  integrity sha512-6mcKsqlqkN9xADrwiUz2gm9Wg4iGnlVGciwBRYFQSMWG6MQjhOZ/AVnxn+6v8nslFgfYTV8fNdE6XwKu6va5PA==
+  dependencies:
+    "@types/prop-types" "*"
+    csstype "^2.2.0"
+
 JSONStream@^1.0.4, JSONStream@^1.3.4:
   version "1.3.5"
   resolved "https://registry.yarnpkg.com/JSONStream/-/JSONStream-1.3.5.tgz#3208c1f08d3a4d99261ab64f92302bc15e111ca0"
@@ -881,6 +894,11 @@ crypto-random-string@^1.0.0:
   resolved "https://registry.yarnpkg.com/crypto-random-string/-/crypto-random-string-1.0.0.tgz#a230f64f568310e1498009940790ec99545bca7e"
   integrity sha1-ojD2T1aDEOFJgAmUB5DsmVRbyn4=
 
+csstype@^2.2.0:
+  version "2.6.2"
+  resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.2.tgz#3043d5e065454579afc7478a18de41909c8a2f01"
+  integrity sha512-Rl7PvTae0pflc1YtxtKbiSqq20Ts6vpIYOD5WBafl4y123DyHUeLrRdQP66sQW8/6gmX8jrYJLXwNeMqYVJcow==
+
 currently-unhandled@^0.4.1:
   version "0.4.1"
   resolved "https://registry.yarnpkg.com/currently-unhandled/-/currently-unhandled-0.4.1.tgz#988df33feab191ef799a61369dd76c17adf957ea"