diff --git a/CHANGELOG.md b/CHANGELOG.md
index 0d4e554..5a9a60b 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,10 @@
+# [1.3.0](https://github.com/streamich/use-media/compare/v1.2.0...v1.3.0) (2019-03-13)
+
+
+### Features
+
+* add useMediaLayout hook ([6b04735](https://github.com/streamich/use-media/commit/6b04735))
+
 # [1.2.0](https://github.com/streamich/use-media/compare/v1.1.0...v1.2.0) (2019-02-18)
 
 
diff --git a/README.md b/README.md
index 2d9a2ac..2b9d1d4 100644
--- a/README.md
+++ b/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>
+  );
+};
+```
diff --git a/package.json b/package.json
index b56b127..b0b44db 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "use-media",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "description": "useMedia React hook",
   "main": "lib/index.js",
   "files": [
diff --git a/src/index.ts b/src/index.ts
index 7ec3915..2d4bb4e 100644
--- a/src/index.ts
+++ b/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;