jake/jarv.is
1
Fork 0
mirror of https://github.com/jakejarvis/jarv.is.git synced 2025-06-30 07:36:38 -04:00
Code Issues Activity

fix theme toggle animating on load

Browse Source
This commit is contained in:
Jake Jarvis
2022-05-08 22:06:53 -04:00
parent 00d497b69b
commit 482700e640
5 changed files with 20 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
.eslintrc.js → .eslintrc.cjs
View File

@ -1,3 +1,6 @@
/**
* @type {import("eslint").Linter.Config}
*/
module.exports = { module.exports = {
root: true, root: true,
parser: "@typescript-eslint/parser", parser: "@typescript-eslint/parser",

9
components/ThemeToggle/ThemeToggle.tsx
View File

@ -1,5 +1,5 @@
import { useEffect, useId, memo } from "react"; import { useEffect, useId, memo } from "react";
import { useMedia } from "react-use"; import { useFirstMountState, useMedia } from "react-use";
import { useSpring, animated, Globals } from "@react-spring/web"; import { useSpring, animated, Globals } from "@react-spring/web";
import { useTheme } from "../../hooks/use-theme"; import { useTheme } from "../../hooks/use-theme";
import { useHasMounted } from "../../hooks/use-has-mounted"; import { useHasMounted } from "../../hooks/use-has-mounted";
@ -24,8 +24,9 @@ export type ThemeToggleProps = {
const ThemeToggle = ({ className }: ThemeToggleProps) => { const ThemeToggle = ({ className }: ThemeToggleProps) => {
const hasMounted = useHasMounted(); const hasMounted = useHasMounted();
const isFirstMount = useFirstMountState();
const { activeTheme, setTheme } = useTheme(); const { activeTheme, setTheme } = useTheme();
const prefersReducedMotion = useMedia("(prefers-reduced-motion: reduce)", false); const hasNoMotionPreference = useMedia("(prefers-reduced-motion: no-preference)", false);
const maskId = useId(); // SSR-safe ID to cross-reference areas of the SVG const maskId = useId(); // SSR-safe ID to cross-reference areas of the SVG
// default to light since `activeTheme` might be undefined // default to light since `activeTheme` might be undefined
@ -34,9 +35,9 @@ const ThemeToggle = ({ className }: ThemeToggleProps) => {
// accessibility: skip animation if user prefers reduced motion // accessibility: skip animation if user prefers reduced motion
useEffect(() => { useEffect(() => {
Globals.assign({ Globals.assign({
skipAnimation: !!prefersReducedMotion, skipAnimation: isFirstMount || !hasNoMotionPreference,
}); });
}, [prefersReducedMotion]); }, [isFirstMount, hasNoMotionPreference]);
// modified from https://jfelix.info/blog/using-react-spring-to-animate-svg-icons-dark-mode-toggle // modified from https://jfelix.info/blog/using-react-spring-to-animate-svg-icons-dark-mode-toggle
const springProperties = { const springProperties = {

2
contexts/ThemeContext.tsx
View File

@ -29,7 +29,7 @@ export const ThemeProvider = ({
const [systemTheme, setSystemTheme] = useState(""); const [systemTheme, setSystemTheme] = useState("");
// hook into system `prefers-dark-mode` setting // hook into system `prefers-dark-mode` setting
// https://web.dev/prefers-color-scheme/#the-prefers-color-scheme-media-query // https://web.dev/prefers-color-scheme/#the-prefers-color-scheme-media-query
const isSystemDark = useMedia("(prefers-color-scheme: dark)", false); const isSystemDark = useMedia("(prefers-color-scheme: dark)");
// get the theme names (light, dark) via passed-in classnames' keys // get the theme names (light, dark) via passed-in classnames' keys
const themeNames = Object.keys(classNames); const themeNames = Object.keys(classNames);

2
package.json
View File

@ -69,7 +69,7 @@
"remark-gfm": "^3.0.1", "remark-gfm": "^3.0.1",
"remove-markdown": "^0.5.0", "remove-markdown": "^0.5.0",
"sanitize-html": "^2.7.0", "sanitize-html": "^2.7.0",
"simple-icons": "^6.20.0", "simple-icons": "^6.21.0",
"sitemap": "^7.1.1", "sitemap": "^7.1.1",
"stitches-normalize": "^2.0.0", "stitches-normalize": "^2.0.0",
"swr": "^1.3.0", "swr": "^1.3.0",

20
yarn.lock
View File

@ -1852,9 +1852,9 @@ aggregate-error@^3.0.0:
indent-string "^4.0.0" indent-string "^4.0.0"
aggregate-error@^4.0.0: aggregate-error@^4.0.0:
version "4.0.0" version "4.0.1"
resolved "https://registry.yarnpkg.com/aggregate-error/-/aggregate-error-4.0.0.tgz#83dbdb53a0d500721281d22e19eee9bc352a89cd" resolved "https://registry.yarnpkg.com/aggregate-error/-/aggregate-error-4.0.1.tgz#25091fe1573b9e0be892aeda15c7c66a545f758e"
integrity sha512-8DGp7zUt1E9k0NE2q4jlXHk+V3ORErmwolEdRz9iV+LKJ40WhMHh92cxAvhqV2I+zEn/gotIoqoMs0NjF3xofg== integrity sha512-0poP0T7el6Vq3rstR8Mn4V/IQrpBLO6POkUSrN7RhyY+GF/InCFShQzsQ39T25gkHhLgSLByyAz+Kjb+c2L98w==
dependencies: dependencies:
clean-stack "^4.0.0" clean-stack "^4.0.0"
indent-string "^5.0.0" indent-string "^5.0.0"
@ -3270,9 +3270,9 @@ globals@^11.1.0:
integrity sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA== integrity sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==
globals@^13.6.0, globals@^13.9.0: globals@^13.6.0, globals@^13.9.0:
version "13.13.0" version "13.14.0"
resolved "https://registry.yarnpkg.com/globals/-/globals-13.13.0.tgz#ac32261060d8070e2719dd6998406e27d2b5727b" resolved "https://registry.yarnpkg.com/globals/-/globals-13.14.0.tgz#daf3ff9b4336527cf56e98330b6f64bea9aff9df"
integrity sha512-EQ7Q18AJlPwp3vUDL4mKA0KXrXyNIQyWon6T6XQiBQF0XHvRsiCSrWmmeATpUzdJN2HhWZU6Pdl0a9zdep5p6A== integrity sha512-ERO68sOYwm5UuLvSJTY7w7NP2c8S4UcXs3X1GBX8cwOr+ShOcDBbCY5mH4zxz0jsYCdJ8ve8Mv9n2YGJMB1aeg==
dependencies: dependencies:
type-fest "^0.20.2" type-fest "^0.20.2"
@ -5620,10 +5620,10 @@ simple-git-hooks@^2.7.0:
resolved "https://registry.yarnpkg.com/simple-git-hooks/-/simple-git-hooks-2.7.0.tgz#121a5c3023663b8abcc5648c8bfe8619dc263705" resolved "https://registry.yarnpkg.com/simple-git-hooks/-/simple-git-hooks-2.7.0.tgz#121a5c3023663b8abcc5648c8bfe8619dc263705"
integrity sha512-nQe6ASMO9zn5/htIrU37xEIHGr9E6wikXelLbOeTcfsX2O++DHaVug7RSQoq+kO7DvZTH37WA5gW49hN9HTDmQ== integrity sha512-nQe6ASMO9zn5/htIrU37xEIHGr9E6wikXelLbOeTcfsX2O++DHaVug7RSQoq+kO7DvZTH37WA5gW49hN9HTDmQ==
simple-icons@^6.20.0: simple-icons@^6.21.0:
version "6.20.0" version "6.21.0"
resolved "https://registry.yarnpkg.com/simple-icons/-/simple-icons-6.20.0.tgz#4328f143ceb6cfc0f4e97380e9a66a208770cb33" resolved "https://registry.yarnpkg.com/simple-icons/-/simple-icons-6.21.0.tgz#96f675f68076e7b42575d7e4c7afaeb798b05c1b"
integrity sha512-eACLpiswB+NIBQwi1Fi7crHrMSjuZrR6PD+s/uMTEUXQ2R0w6nlEE8wFDxEZ7A41re8auQASYXHU4ujRBOa66g== integrity sha512-+DRxJwF66C5ZOgYUIy4BfD+algfVaRKfKT7Qs8TtvPSCfc7+BUoKh5Udfa0zPHsUc8BmAuflcTrQqVv+5XpY6g==
sirv@^1.0.7: sirv@^1.0.7:
version "1.0.19" version "1.0.19"