add matchMedia to the docs

pikax · Dec 28, 2019 · 4f408c5 · 4f408c5
1 parent ce596da
commit 4f408c5
Show file tree

Hide file tree

Showing 7 changed files with 59 additions and 18 deletions.
diff --git a/docs/.vuepress/components/MatchMediaExample.vue b/docs/.vuepress/components/MatchMediaExample.vue
@@ -0,0 +1,16 @@
+<template>
+  <div>
+    <p>Screen less than 600px: <b>{{ matches }}</b></p>
+  </div>
+</template>
+
+<script>
+import { useMatchMedia } from "vue-composable";
+
+export default {
+  name: "match-media-example",
+  setup() {
+    return useMatchMedia("(max-width: 600px)");
+  }
+};
+</script>
diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js
@@ -198,8 +198,8 @@ module.exports = {
           children: [
             ["composable/web/fetch", "fetch"],
             ["composable/web/webSocket", "webSocket"],
-            ["composable/web/intersectionObserver", "IntersectionObserver"]
-
+            ["composable/web/intersectionObserver", "IntersectionObserver"],
+            ["composable/web/matchMedia", "matchMedia"]
           ]
         },
         {

diff --git a/docs/README.md b/docs/README.md
@@ -73,6 +73,7 @@ Check out the [examples folder](examples) or start hacking on [codesandbox](http
 - [Fetch](composable/web/fetch) - reactive `fetch` wrapper
 - [WebSocket](composable/web/webSocket) - reactive `WebSocket` wrapper
 - [IntersectionObserver](composable/web/intersectionObserver) - reactive `IntersectionObserver`
+- [MatchMedia](composable/web/matchMedia) - reactive `MatchMedia`
 
 ### External
 
@@ -119,4 +120,6 @@ export default {
 
 ### Pagination example
 
+<ClientOnly>
 <array-pagination-example/>
+</ClientOnly>
diff --git a/docs/composable/_template.md b/docs/composable/_template.md
@@ -1,18 +1,16 @@
-# 
+#
 
 > The [mousemove event](https://developer.mozilla.org/en-US/docs/Web/API/Document/scroll_event).
 
+## Parameters
 
-## Parameters 
 ```js
 import { useOnScroll } from "vue-composable";
 
 const scroll = useOnScroll(options);
 ```
 
-| Parameters      | Type     | Description         |
-
-
+| Parameters | Type | Description |
 
 ## State
 
@@ -51,4 +49,6 @@ const { remove } = useOnScroll();
 
 ### Code
 
+<ClientOnly>
 <on-scroll-example/>
+</ClientOnly>
diff --git a/docs/composable/web/matchMedia.md b/docs/composable/web/matchMedia.md
@@ -1,4 +1,4 @@
-#
+# MatchMedia
 
 > The [matchMedia](https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia).
 
@@ -10,8 +10,9 @@ import { useMatchMedia } from "vue-composable";
 const matchMedia = useMatchMedia(mediaQueryString);
 ```
 
-| Parameters | Type | Description |
-|mediaQueryString| string| A string representing the media query to parse.
+| Parameters       | Type     | Description                                     |
+| ---------------- | -------- | ----------------------------------------------- |
+| mediaQueryString | `String` | A string representing the media query to parse. |
 
 ## State
 
@@ -20,13 +21,13 @@ The `useMatchMedia` function exposes the following reactive state:
 ```js
 import { useMatchMedia } from "vue-composable";
 
-const { scrollTop, scrollLeft } = useMatchMedia();
+const { scrollTop, matches } = useMatchMedia();
 ```
 
-| State      | Type     | Description         |
-| ---------- | -------- | ------------------- |
-| scrollTop  | `Number` | Scroll top position |
-| scrollLeft | `Number` | Scroll let position |
+| State          | Type                                                                              | Description                                                                                          |
+| -------------- | --------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------- |
+| mediaQueryList | [MediaQueryList](https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList) | List of objects stores information on a media query                                                  |
+| matches        | `Boolean`                                                                         | A Boolean that returns true if the document currently matches the media query list, or false if not. |
 
 ## Methods
 
@@ -45,9 +46,26 @@ const { remove } = useMatchMedia();
 ## Example
 
 ```vue
+<template>
+  <div>
+    <p>Screen less than 600px: <b>{{ matches }}</b></p>
+  </div>
+</template>
 
+<script>
+import { useMatchMedia } from "vue-composable";
+
+export default {
+  name: "match-media-example",
+  setup() {
+    return useMatchMedia("(max-width: 600px)");
+  }
+};
+</script>
 ```
 
 ### Code
 
-<on-scroll-example/>
+<ClientOnly>
+<match-media-example/>
+</ClientOnly>
diff --git a/packages/web/src/web/index.ts b/packages/web/src/web/index.ts
@@ -1,4 +1,5 @@
 export * from './fetch';
 export * from './webSocket';
 export * from './localStorage';
-export * from './intersectionObserver'
+export * from './intersectionObserver'
+export * from './matchMedia'
diff --git a/packages/web/src/web/matchMedia.ts b/packages/web/src/web/matchMedia.ts
@@ -1,4 +1,4 @@
-import { ref } from "@vue/composition-api";
+import { ref, onUnmounted } from "@vue/composition-api";
 
 export function useMatchMedia(query: string) {
   const mediaQueryList = ref<MediaQueryList>(matchMedia(query));
@@ -13,6 +13,9 @@ export function useMatchMedia(query: string) {
   const remove = () =>
     mediaQueryList.value.removeEventListener("change", process);
 
+
+  onUnmounted(remove);
+
   return {
     mediaQueryList,
     remove,