Openstatus
www.openstatus.dev
Implement prefers-reduced-motion Handling in the Globe Component #541 (#566)
* Fixed the Globe Issues
* Replaced the useMediaQuery Module with a Hook
* Added Custom Hook
* fix: reverse condition
---------
Co-authored-by: Maximilian Kaske <56969857+mxkaske@users.noreply.github.com>
authored by
Kushagra Sharma
Maximilian Kaske
and committed by
GitHub
b6979d45
92eca51e
+33
-1
+5
-1
apps/web/src/components/marketing/monitor/globe.tsx
+5
-1
apps/web/src/components/marketing/monitor/globe.tsx
···
2
2
3
3
import { useEffect, useRef } from "react";
4
4
import createGlobe from "cobe";
5
+
import { useMediaQuery } from '@/hooks/use-media-query';
5
6
6
7
const SIZE = 350;
7
8
8
9
export function Globe() {
9
10
const canvasRef = useRef<HTMLCanvasElement>(null);
11
+
const prefersReducedMotion = useMediaQuery('((prefers-reduced-motion: reduce))');
10
12
11
13
useEffect(() => {
12
14
let phi = 0;
···
42
44
onRender: (state) => {
43
45
// Called on every animation frame.
44
46
// `state` will be an empty object, return updated params.
47
+
if (!prefersReducedMotion) {
45
48
state.phi = phi;
46
49
phi += 0.003;
50
+
}
47
51
},
48
52
});
49
53
···
56
60
return () => {
57
61
globe.destroy();
58
62
};
59
-
}, []);
63
+
}, [prefersReducedMotion]);
60
64
61
65
return (
62
66
<div className="flex justify-center">
+28
apps/web/src/hooks/use-media-query.ts
+28
apps/web/src/hooks/use-media-query.ts
···
1
+
import { useEffect, useState } from 'react';
2
+
3
+
type MediaQuery = string | number;
4
+
5
+
export function useMediaQuery(query: MediaQuery): boolean {
6
+
const [matches, setMatches] = useState<boolean>(false);
7
+
8
+
useEffect(() => {
9
+
const mediaQueryList = window.matchMedia(String(query));
10
+
11
+
const handleChange = (event: MediaQueryListEvent) => {
12
+
setMatches(event.matches);
13
+
};
14
+
15
+
// Initial check
16
+
setMatches(mediaQueryList.matches);
17
+
18
+
// Add listener for changes
19
+
mediaQueryList.addEventListener('change', handleChange);
20
+
21
+
// Clean up listener on unmount
22
+
return () => {
23
+
mediaQueryList.removeEventListener('change', handleChange);
24
+
};
25
+
}, [query]);
26
+
27
+
return matches;
28
+
}