feat(usePreferredReducedMotion): new function (#2039)

packages/components/index.ts

@@ -40,6 +40,7 @@ export * from '../core/usePointer/component'
 export * from '../core/usePreferredColorScheme/component'
 export * from '../core/usePreferredDark/component'
 export * from '../core/usePreferredLanguages/component'
+export * from '../core/usePreferredReducedMotion/component'
 export * from '../core/useScreenSafeArea/component'
 export * from '../core/useScroll/directive'
 export * from '../core/useScrollLock/directive'

packages/core/index.ts

@@ -83,6 +83,7 @@ export * from './usePointerSwipe'
 export * from './usePreferredColorScheme'
 export * from './usePreferredDark'
 export * from './usePreferredLanguages'
+export * from './usePreferredReducedMotion'
 export * from './useRafFn'
 export * from './useRefHistory'
 export * from './useResizeObserver'

packages/core/usePreferredReducedMotion/component.ts

@@ -0,0 +1,16 @@
+import { defineComponent, reactive } from 'vue-demi'
+import { usePreferredReducedMotion } from '@vueuse/core'
+
+export const UsePreferredReducedMotion = defineComponent({
+  name: 'UsePreferredReducedMotion',
+  setup(props, { slots }) {
+    const data = reactive({
+      motion: usePreferredReducedMotion(),
+    })
+
+    return () => {
+      if (slots.default)
+        return slots.default(data)
+    }
+  },
+})

packages/core/usePreferredReducedMotion/demo.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import { usePreferredReducedMotion } from '@vueuse/core'
+
+const motion = usePreferredReducedMotion()
+</script>
+
+<template>
+  <note class="mb-2">
+    Preferred Motion:
+  </note>
+  <code>{{ motion }}</code>
+</template>

packages/core/usePreferredReducedMotion/index.md

@@ -0,0 +1,23 @@
+---
+category: Browser
+---
+
+# usePreferredReducedMotion
+
+Reactive [prefers-reduced-motion](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion) media query.
+
+## Usage
+
+```js
+import { usePreferredReducedMotion } from '@vueuse/core'
+
+const preferredMotion = usePreferredReducedMotion()
+```
+
+## Component Usage
+
+```html
+<UsePreferredReducedMotion v-slot="{ motion }">
+  Preferred Color Scheme: {{ motion }}
+<UsePreferredReducedMotion>
+```

packages/core/usePreferredReducedMotion/index.ts

@@ -0,0 +1,21 @@
+import { computed } from 'vue-demi'
+import { useMediaQuery } from '../useMediaQuery'
+import type { ConfigurableWindow } from '../_configurable'
+
+export type ReducedMotionType = 'reduce' | 'no-preference'
+
+/**
+ * Reactive prefers-reduced-motion media query.
+ *
+ * @see https://vueuse.org/usePreferredReducedMotion
+ * @param [options]
+ */
+export function usePreferredReducedMotion(options?: ConfigurableWindow) {
+  const isReduced = useMediaQuery('(prefers-reduced-motion: reduce)', options)
+
+  return computed<ReducedMotionType>(() => {
+    if (isReduced.value)
+      return 'reduce'
+    return 'no-preference'
+  })
+}