react-aspect-ratio/dist/umd/react-15.6.js

React Component to maintain a consistent width-to-height ratio (aspect ratio), preventing cumulative layout shift.

(function (global, factory) {
  if (typeof define === "function" && define.amd) {
    define(["exports", "react", "react/jsx-runtime"], factory);
  } else if (typeof exports !== "undefined") {
    factory(exports, require("react"), require("react/jsx-runtime"));
  } else {
    var mod = {
      exports: {}
    };
    factory(mod.exports, global.react, global.jsxRuntime);
    global.react156 = mod.exports;
  }
})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_exports, _react, _jsxRuntime) {
  "use strict";

  _exports.__esModule = true;
  _exports["default"] = void 0;
  var _excluded = ["className", "children", "ratio", "style"];
  function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
  function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } } return target; }
  function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; _setPrototypeOf(subClass, superClass); }
  function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
  var CUSTOM_PROPERTY_NAME = '--aspect-ratio';
  var DEFAULT_CLASS_NAME = 'react-aspect-ratio-placeholder';
  var AspectRatio = /*#__PURE__*/function (_Component) {
    function AspectRatio() {
      var _this;
      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
        args[_key] = arguments[_key];
      }
      _this = _Component.call.apply(_Component, [this].concat(args)) || this;
      _this.node = null;
      _this.setNode = function (node) {
        _this.node = node;
      };
      return _this;
    }
    _inheritsLoose(AspectRatio, _Component);
    var _proto = AspectRatio.prototype;
    _proto.componentDidUpdate = function componentDidUpdate() {
      if (this.node) {
        var node = this.node;

        // BC for older version of React https://github.com/facebook/react/issues/6411
        // check if React support custom property AFTER
        var customPropertyValue = node.style.getPropertyValue(CUSTOM_PROPERTY_NAME);
        if (!customPropertyValue) {
          node.style.setProperty(CUSTOM_PROPERTY_NAME, "(" + this.props.ratio + ")");
        }
      }
    };
    _proto.render = function render() {
      var _extends2;
      var _this$props = this.props,
        className = _this$props.className,
        children = _this$props.children,
        ratio = _this$props.ratio,
        style = _this$props.style,
        restProps = _objectWithoutPropertiesLoose(_this$props, _excluded); // eslint-disable-line no-unused-vars

      var newStyle = _extends({}, style, (_extends2 = {}, _extends2[CUSTOM_PROPERTY_NAME] = "(" + ratio + ")", _extends2));
      return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", _extends({
        className: className,
        ref: this.setNode,
        style: newStyle
      }, restProps, {
        children: children
      }));
    };
    return AspectRatio;
  }(_react.Component);
  AspectRatio.defaultProps = {
    className: DEFAULT_CLASS_NAME,
    ratio: 1
  };
  var _default = _exports["default"] = AspectRatio;
});