feat: add sensor/useMedia hook

Author: jo0ger

README.md

@@ -69,7 +69,7 @@ and then:
   * [ ] `useIdle`: tracks whether user is being inactive
   * [ ] `useIntersection`: tracks an HTML element's intersection
   * [ ] `useEvent`: subscribe to events
-  * [ ] `useMedia`: tracks state of a CSS media query
+  * [x] [`useMedia`](./src/hooks/sensor/useMedia/doc.md): tracks state of a CSS media query
   * [ ] `useMediaDevices`: tracks connected hardware devices
   * [ ] `useMotion`: tracks state of device's motion sensor
   * [x] [`useMouse`](./src/hooks/sensor/useMouse/doc.md): tracks state of mouse position

src/hooks/sensor/useMedia/demo.story.tsx

@@ -0,0 +1,21 @@
+import { storiesOf } from '@storybook/vue'
+import { createComponent } from '@vue/composition-api'
+import Doc from '../../../__stories__/components/Doc'
+import { useMedia } from '../../..'
+
+const Demo = createComponent({
+  setup() {
+    const isWide = useMedia('(min-width: 480px)')
+    return { isWide }
+  },
+  render() {
+    const { isWide } = this
+    return <div>Screen is wide(min-width: 480px): {isWide ? 'Yes' : 'No'}</div>
+  }
+})
+
+const Docs = () => <Doc md={require('./doc.md')}></Doc>
+
+storiesOf('Sensor|useMedia', module)
+  .add('Docs', () => Docs as any)
+  .add('Demo', () => Demo)

src/hooks/sensor/useMedia/doc.md

@@ -0,0 +1,29 @@
+# useMedia
+
+Vue hook that tracks state of a CSS media query.
+
+> Browser environment is required
+
+## Usage
+
+```jsx
+import { createComponent } from '@vue/composition-api'
+import { useMouse } from 'vuses'
+
+const Demo = createComponent({
+  setup() {
+    const isWide = useMedia('(min-width: 480px)')
+    return { isWide }
+  },
+  render() {
+    const { isWide } = this
+    return <div>Screen is wide(min-width: 480px): {isWide ? 'Yes' : 'No'}</div>
+  }
+})
+```
+
+## Reference
+
+```typescript
+function useMedia(query: string): Ref<boolean>
+```

src/hooks/sensor/useMedia/index.ts

@@ -0,0 +1,31 @@
+import { ref, onMounted, onUnmounted, Ref } from '@vue/composition-api'
+import {
+  checkBrowser,
+  addEventListener,
+  removeEventListener
+} from '../../../utils'
+
+export default function useMedia(query: string): Ref<boolean> {
+  checkBrowser(useMedia.name)
+
+  const state = ref(window.matchMedia(query).matches)
+  let mounted = true
+  let mql: MediaQueryList = window.matchMedia(query)
+
+  const update = () => {
+    if (!mounted) return
+    state.value = !!mql.matches
+  }
+
+  onMounted(() => {
+    update()
+    addEventListener(mql, 'change', update)
+  })
+
+  onUnmounted(() => {
+    mounted = false
+    removeEventListener(mql, 'change', update)
+  })
+
+  return state
+}

src/hooks/sensor/useMouse/demo.story.tsx

@@ -1,10 +1,5 @@
 import { storiesOf } from '@storybook/vue'
-import {
-  createComponent,
-  reactive,
-  computed,
-  onMounted
-} from '@vue/composition-api'
+import { createComponent } from '@vue/composition-api'
 import Doc from '../../../__stories__/components/Doc'
 import { useMouse } from '../../..'
 

src/index.ts

@@ -11,6 +11,7 @@ export { default as useWindowScroll } from './hooks/sensor/useWindowScroll'
 export { default as useGeolocation } from './hooks/sensor/useGeolocation'
 export { default as useMouse } from './hooks/sensor/useMouse'
 export { default as useBattery } from './hooks/sensor/useBattery'
+export { default as useMedia } from './hooks/sensor/useMedia'
 
 // Side Effect Hooks
 export { default as useTitle } from './hooks/sideEffect/useTitle'

src/utils/index.ts

@@ -35,7 +35,7 @@ export const checkBrowser = (ctx = '') => {
 }
 
 export const addEventListener = (
-  el: Element | Window | PermissionStatus | Document | BatteryManager,
+  el: EventTarget,
   event: string,
   handler: EventListener,
   options?: AddEventListenerOptions
@@ -44,7 +44,7 @@ export const addEventListener = (
 }
 
 export const removeEventListener = (
-  el: Element | Window | PermissionStatus | Document | BatteryManager,
+  el: EventTarget,
   event: string,
   handler: EventListener,
   options?: EventListenerOptions