jake/jarv.is
1
Fork 0
mirror of https://github.com/jakejarvis/jarv.is.git synced 2025-09-18 16:05:33 -04:00
Code Issues Activity

fix prefers-reduced-motion detection

Browse Source
This commit is contained in:
Jake Jarvis
2022-05-03 14:57:32 -04:00
parent bb4115a529
commit 2ea6495fd8
7 changed files with 57 additions and 117 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
components/ThemeToggle/ThemeToggle.tsx
View File

@@ -1,8 +1,8 @@
import { useEffect, memo } from "react";
import { useMedia } from "react-use";
import { useSpring, animated, Globals } from "@react-spring/web";
import { useTheme } from "../../hooks/use-theme";
import { useHasMounted } from "../../hooks/use-has-mounted";
import { usePrefersReducedMotion } from "../../hooks/use-prefers-reduced-motion";
import { styled } from "../../lib/styles/stitches.config";
const Button = styled("button", {
@@ -25,7 +25,7 @@ export type ThemeToggleProps = {
const ThemeToggle = ({ id = "nav", className }: ThemeToggleProps) => {
const hasMounted = useHasMounted();
const prefersReducedMotion = usePrefersReducedMotion();
const prefersReducedMotion = useMedia("(prefers-reduced-motion: reduce)", false);
const { resolvedTheme, setTheme } = useTheme();
// default to light since `resolvedTheme` might be undefined
@@ -34,7 +34,7 @@ const ThemeToggle = ({ id = "nav", className }: ThemeToggleProps) => {
// accessibility: skip animation if user prefers reduced motion
useEffect(() => {
Globals.assign({
skipAnimation: prefersReducedMotion,
skipAnimation: !!prefersReducedMotion,
});
}, [prefersReducedMotion]);