feat: add useMediaLayout hook

Adds `useMediaLayout` hook that internally uses `useLayoutEffect` React hook.

README.md

@@ -5,6 +5,8 @@
 
 ## Usage
 
+With `useEffect`
+
 ```jsx
 import {useMedia} from 'use-media';
 
@@ -21,3 +23,22 @@ const Demo = () => {
   );
 };
 ```
+
+With `useLayoutEffect`
+
+```jsx
+import {useMediaLayout} from 'use-media';
+
+const Demo = () => {
+  // Accepts an object of features to test
+  const isWide = useMediaLayout({ minWidth: 1000 });
+  // Or a regular media query string
+  const reduceMotion = useMediaLayout('(prefers-reduced-motion: reduce)');
+
+  return (
+    <div>
+      Screen is wide: {isWide ? '😃' : '😢'}
+    </div>
+  );
+};
+```

src/index.ts

@@ -1,6 +1,7 @@
+import { DependencyList, EffectCallback } from 'react';
 import * as React from 'react';
 
-const { useState, useEffect } = React;
+const { useState, useEffect, useLayoutEffect } = React;
 
 type MediaQueryObject = { [key: string]: string | number | boolean };
 
@@ -23,13 +24,14 @@ const objectToString = (query: string | MediaQueryObject) => {
     .join(' and ');
 };
 
-export const useMedia = (
+type Effect = (effect: EffectCallback, deps?: DependencyList) => void;
+const createUseMedia = (effect: Effect) => (
   rawQuery: string | MediaQueryObject,
   defaultState: boolean = false
 ) => {
   const [state, setState] = useState(defaultState);
   const query = objectToString(rawQuery);
-  useEffect(() => {
+  effect(() => {
     let mounted = true;
     const mql = window.matchMedia(query);
     const onChange = () => {
@@ -49,4 +51,8 @@ export const useMedia = (
   return state;
 };
 
+
+export const useMedia = createUseMedia(useEffect);
+export const useMediaLayout = createUseMedia(useLayoutEffect);
+
 export default useMedia;