Allow query argument to be an object

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>

src/index.ts

@@ -2,9 +2,33 @@ import * as React from 'react';
 
 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);