feat: add usePreferredMotionIntensity

kripod · Oct 24, 2019 · eaed758 · eaed758
1 parent 0bbdd62
commit eaed758
Showing 1 changed file with 21 additions and 0 deletions.
diff --git a/packages/web-api-hooks/src/usePreferredMotionIntensity.ts b/packages/web-api-hooks/src/usePreferredMotionIntensity.ts
@@ -0,0 +1,21 @@
+import useMedia from './useMedia';
+
+/**
+ * Tracks motion intensity preference of the user.
+ *
+ * @returns Preferred motion intensity.
+ *
+ * @example
+ * function Component() {
+ *   const preferReducedMotion = usePreferredMotionIntensity() === 'reduce';
+ *   // ...
+ * }
+ */
+export default function usePreferredMotionIntensity():
+  | 'no-preference'
+  | 'reduce' {
+  const isReduce = useMedia('(prefers-reduced-motion: reduce)');
+
+  if (isReduce) return 'reduce';
+  return 'no-preference';
+}