usePrefersReducedMotion

usePrefersReducedMotion(): Service<{ readonly matches: boolean }>

(prefers-reduced-motion: reduce) as a named service.

Usage

import { Base, usePrefersReducedMotion } from '@studiometa/js-toolkit';

class Carousel extends Base {
  static config = { name: 'Carousel' };

  mounted() {
    return usePrefersReducedMotion().subscribe(({ matches }) => {
      matches ? this.stopAutoplay() : this.startAutoplay();
    });
  }

  startAutoplay() {}
  stopAutoplay() {}
}

Why it is a service and not a read

The preference changes while the page is open. A read at load time is a snapshot that goes stale, and the user who turns reduced motion on mid-visit is exactly the user who most wants it honoured.

props() answers with no subscription, like every useMediaQuery() instance — so a one-off check is still one line. Subscribe when the component should follow the change.

Mounting on the preference instead

To decide whether a component exists at all, use the mount strategy:

<div data-component="Parallax" data-mount="media:(prefers-reduced-motion: no-preference)"></div>

That strategy is reversible, so turning the preference on unmounts the component and turning it off mounts it again. withMountWhenPrefersMotion is deleted.