20 lines
698 B
TypeScript
20 lines
698 B
TypeScript
import { useEffect, useState } from 'react'
|
|
|
|
// True when the visitor asked the OS to reduce motion.
|
|
// The initial value is read synchronously so the very first paint already
|
|
// shows the static layout — no flash of the animated scene.
|
|
export function useReducedMotion() {
|
|
const [reduced, setReduced] = useState(
|
|
() => typeof matchMedia !== 'undefined' && matchMedia('(prefers-reduced-motion: reduce)').matches,
|
|
)
|
|
|
|
useEffect(() => {
|
|
const mq = matchMedia('(prefers-reduced-motion: reduce)')
|
|
const update = () => setReduced(mq.matches)
|
|
update()
|
|
mq.addEventListener('change', update)
|
|
return () => mq.removeEventListener('change', update)
|
|
}, [])
|
|
|
|
return reduced
|
|
}
|