@atlaskit/motion/dist/esm/utils/use-is-reduced-motion.js

A set of utilities to apply motion in your application.

import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import { useEffect, useState } from 'react';
import { bind } from 'bind-event-listener';
import { isMatchMediaAvailable } from './is-match-media-available';
import { isReducedMotion } from './is-reduced-motion';

/**
 * A React hook version of {@link isReducedMotion}.
 * Useful for React components that need to re-render if the user's motion
 * preference changes at runtime.
 */
export var useIsReducedMotion = function useIsReducedMotion() {
  var _useState = useState(isReducedMotion),
    _useState2 = _slicedToArray(_useState, 2),
    prefersReducedMotion = _useState2[0],
    setPrefersReducedMotion = _useState2[1];
  useEffect(function () {
    if (!isMatchMediaAvailable()) {
      return;
    }
    var mediaQueryList = window.matchMedia('(prefers-reduced-motion: reduce)');
    var onChange = function onChange(event) {
      return setPrefersReducedMotion(event.matches);
    };
    return bind(mediaQueryList, {
      type: 'change',
      listener: onChange
    });
  }, []);
  return prefersReducedMotion;
};