zarm/es/use-orientation/index.js

基于 React 的移动端UI库

import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import { useEffect, useState } from 'react';
import Events from '../utils/events';
var defaultProps = {
  angle: 0,
  type: 'portrait-primary'
};

var useOrientation = function useOrientation() {
  var initialState = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : defaultProps;

  var _useState = useState(initialState),
      _useState2 = _slicedToArray(_useState, 2),
      state = _useState2[0],
      setState = _useState2[1];

  useEffect(function () {
    var _window = window,
        screen = _window.screen;
    var mounted = true;

    var onChange = function onChange() {
      if (mounted) {
        var orientation = screen.orientation;

        if (orientation) {
          var angle = orientation.angle,
              type = orientation.type;
          setState({
            angle: angle,
            type: type
          });
        } else if (window.orientation !== undefined) {
          setState({
            angle: typeof window.orientation === 'number' ? window.orientation : 0,
            type: ''
          });
        } else {
          setState(initialState);
        }
      }
    };

    Events.on(window, 'orientationchange', onChange);
    onChange();
    return function () {
      mounted = false;
      Events.off(window, 'orientationchange', onChange);
    };
  }, []);
  return state;
};

export default useOrientation;