@carbon/ibm-products/lib/global/js/hooks/usePrefersReducedMotion.js

Carbon for IBM Products

/**
 * Copyright IBM Corp. 2020, 2025
 *
 * This source code is licensed under the Apache-2.0 license found in the
 * LICENSE file in the root directory of this source tree.
 */

'use strict';

var React = require('react');
var useIsomorphicEffect = require('./useIsomorphicEffect.js');

// safety checks for remix env
// https://remix.run/docs/en/main/guides/gotchas#typeof-window-checks

const usePrefersReducedMotion = () => {
  const [prefersReducedMotion, setPrefersReducedMotion] = React.useState(false);
  useIsomorphicEffect.useIsomorphicEffect(() => {
    const mediaQueryList = window.matchMedia('(prefers-reduced-motion: no-preference)');
    const {
      matches
    } = window.matchMedia('(prefers-reduced-motion: no-preference)');
    setPrefersReducedMotion(!matches);
    const listener = event => {
      setPrefersReducedMotion(!event.matches);
    };
    mediaQueryList.addEventListener('change', listener);
    return () => {
      mediaQueryList.removeEventListener('change', listener);
    };
  }, []);
  return prefersReducedMotion;
};

exports.usePrefersReducedMotion = usePrefersReducedMotion;