1 line
1.9 KiB
Plaintext
1 line
1.9 KiB
Plaintext
{"version":3,"file":"use-reduced-motion.mjs","sources":["../../../../src/utils/reduced-motion/use-reduced-motion.ts"],"sourcesContent":["\"use client\"\n\nimport {\n hasReducedMotionListener,\n initPrefersReducedMotion,\n prefersReducedMotion,\n} from \"motion-dom\"\nimport { warnOnce } from \"motion-utils\"\nimport { useState } from \"react\"\n\n/**\n * A hook that returns `true` if we should be using reduced motion based on the current device's Reduced Motion setting.\n *\n * This can be used to implement changes to your UI based on Reduced Motion. For instance, replacing motion-sickness inducing\n * `x`/`y` animations with `opacity`, disabling the autoplay of background videos, or turning off parallax motion.\n *\n * It will actively respond to changes and re-render your components with the latest setting.\n *\n * ```jsx\n * export function Sidebar({ isOpen }) {\n * const shouldReduceMotion = useReducedMotion()\n * const closedX = shouldReduceMotion ? 0 : \"-100%\"\n *\n * return (\n * <motion.div animate={{\n * opacity: isOpen ? 1 : 0,\n * x: isOpen ? 0 : closedX\n * }} />\n * )\n * }\n * ```\n *\n * @return boolean\n *\n * @public\n */\nexport function useReducedMotion() {\n /**\n * Lazy initialisation of prefersReducedMotion\n */\n !hasReducedMotionListener.current && initPrefersReducedMotion()\n\n const [shouldReduceMotion] = useState(prefersReducedMotion.current)\n\n if (process.env.NODE_ENV !== \"production\") {\n warnOnce(\n shouldReduceMotion !== true,\n \"You have Reduced Motion enabled on your device. Animations may not appear as expected.\",\n \"reduced-motion-disabled\"\n )\n }\n\n /**\n * TODO See if people miss automatically updating shouldReduceMotion setting\n */\n\n return shouldReduceMotion\n}\n"],"names":[],"mappings":";;;;;AAUA;;;;;;;;;;;;;;;;;;;;;;;;;AAyBG;;AAEC;;AAEG;AACH;;;;;AAYA;;AAEG;AAEH;AACJ;;"} |