aboutsummaryrefslogtreecommitdiffstatshomepage
path: root/docs/components/usePrefersReducedMotion.tsx
diff options
context:
space:
mode:
author简律纯 <i@jyunko.cn>2023-11-03 21:13:33 +0800
committer简律纯 <i@jyunko.cn>2023-11-03 21:13:33 +0800
commit9f0d43fe099a95ab1516ae951dcb60a89e76a5a5 (patch)
tree51614fe47bff8bb11028a07d4a35c34c9ff6594a /docs/components/usePrefersReducedMotion.tsx
parent8f135707d069c900e055dae71e69909d6b9a41bb (diff)
downloadHydroRoll-9f0d43fe099a95ab1516ae951dcb60a89e76a5a5.tar.gz
HydroRoll-9f0d43fe099a95ab1516ae951dcb60a89e76a5a5.zip
chore: delete useless codes
Diffstat (limited to 'docs/components/usePrefersReducedMotion.tsx')
-rw-r--r--docs/components/usePrefersReducedMotion.tsx44
1 files changed, 0 insertions, 44 deletions
diff --git a/docs/components/usePrefersReducedMotion.tsx b/docs/components/usePrefersReducedMotion.tsx
deleted file mode 100644
index dd9d82c..0000000
--- a/docs/components/usePrefersReducedMotion.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import { useState, useEffect } from "react";
-
-const QUERY = "(prefers-reduced-motion: no-preference)";
-const isRenderingOnServer = typeof window === "undefined";
-/**
- * All code here from https://www.joshwcomeau.com/snippets/react-hooks/use-prefers-reduced-motion/
- */
-const getInitialState = () => {
- // For our initial server render, we won't know if the user
- // prefers reduced motion, but it doesn't matter. This value
- // will be overwritten on the client, before any animations
- // occur.
- return isRenderingOnServer ? true : !window.matchMedia(QUERY).matches;
-};
-
-/**
- * Checks the user's device setting for `prefers-reduced-motion`.
- * Use this if you can't use a media query in CSS.
- *
- * From https://www.joshwcomeau.com/snippets/react-hooks/use-prefers-reduced-motion/
- */
-export function usePrefersReducedMotion(): boolean {
- const [prefersReducedMotion, setPrefersReducedMotion] =
- useState(getInitialState);
- useEffect(() => {
- const mediaQueryList = window.matchMedia(QUERY);
- const listener = (event: MediaQueryListEvent) => {
- setPrefersReducedMotion(!event.matches);
- };
- if (mediaQueryList.addEventListener) {
- mediaQueryList.addEventListener("change", listener);
- } else {
- mediaQueryList.addListener(listener);
- }
- return () => {
- if (mediaQueryList.removeEventListener) {
- mediaQueryList.removeEventListener("change", listener);
- } else {
- mediaQueryList.removeListener(listener);
- }
- };
- }, []);
- return prefersReducedMotion;
-}