Move useMedia to own file

components/tilt.js

@@ -1,20 +1,6 @@
-import React, { useEffect, useRef, useState } from 'react'
+import React, { useEffect, useRef } from 'react'
 import VanillaTilt from 'vanilla-tilt'
-
+import useMedia from '../lib/use-media'
-function useMedia(query) {
-  const [matches, setMatches] = useState(false)
-
-  useEffect(() => {
-    const onChange = e => setMatches(e.matches)
-    const mq = window.matchMedia(query)
-    setMatches(mq.matches)
-    mq.addEventListener('change', onChange)
-
-    return () => mq.removeEventListener('change', onChange)
-  }, [query])
-
-  return { matches }
-}
 
 // NOTE(@lachlanjc): only pass one child!
 const Tilt = ({ options = {}, children, ...props }) => {

lib/use-media.js

@@ -0,0 +1,16 @@
+import { useState, useEffect } from 'react'
+
+export default function useMedia(query) {
+  const [matches, setMatches] = useState(false)
+
+  useEffect(() => {
+    const onChange = e => setMatches(e.matches)
+    const mq = window.matchMedia(query)
+    setMatches(mq.matches)
+    mq.addEventListener('change', onChange)
+
+    return () => mq.removeEventListener('change', onChange)
+  }, [query])
+
+  return { matches }
+}