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

A set of utilities to apply motion in your application.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.useIsReducedMotion = void 0;
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _react = require("react");
var _bindEventListener = require("bind-event-listener");
var _isMatchMediaAvailable = require("./is-match-media-available");
var _isReducedMotion = require("./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.
 */
var useIsReducedMotion = exports.useIsReducedMotion = function useIsReducedMotion() {
  var _useState = (0, _react.useState)(_isReducedMotion.isReducedMotion),
    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
    prefersReducedMotion = _useState2[0],
    setPrefersReducedMotion = _useState2[1];
  (0, _react.useEffect)(function () {
    if (!(0, _isMatchMediaAvailable.isMatchMediaAvailable)()) {
      return;
    }
    var mediaQueryList = window.matchMedia('(prefers-reduced-motion: reduce)');
    var onChange = function onChange(event) {
      return setPrefersReducedMotion(event.matches);
    };
    return (0, _bindEventListener.bind)(mediaQueryList, {
      type: 'change',
      listener: onChange
    });
  }, []);
  return prefersReducedMotion;
};