diff options
Diffstat (limited to 'shared/components/src/stores/prefers-reduced-motion.ts')
| -rw-r--r-- | shared/components/src/stores/prefers-reduced-motion.ts | 27 |
1 files changed, 27 insertions, 0 deletions
diff --git a/shared/components/src/stores/prefers-reduced-motion.ts b/shared/components/src/stores/prefers-reduced-motion.ts new file mode 100644 index 0000000..03d9393 --- /dev/null +++ b/shared/components/src/stores/prefers-reduced-motion.ts @@ -0,0 +1,27 @@ +import { readable } from 'svelte/store'; + +const DEFAULT_SETTING = false; + +export const prefersReducedMotion = readable(DEFAULT_SETTING, (set) => { + if (typeof window === 'undefined' || typeof matchMedia === 'undefined') { + set(DEFAULT_SETTING); + return; + } + + const motionQuery = matchMedia('(prefers-reduced-motion)'); + + /* istanbul ignore next */ + const motionQueryListener = (): void => { + set(motionQuery.matches); + }; + + // `addListener` is deprecated but should still be used for compatibility with more browsers. + motionQuery.addListener(motionQueryListener); + + set(motionQuery.matches); + + return function (): void { + // `removeListener` is deprecated but should still be used for compatibility with more browsers. + motionQuery.removeListener(motionQueryListener); + }; +}); |
