react-aspect-ratio/dist/next/react-latest.js

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

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; }
import { forwardRef } from 'react';
import { jsx as _jsx } from "react/jsx-runtime";
var CUSTOM_PROPERTY_NAME = '--aspect-ratio';
var DEFAULT_CLASS_NAME = 'react-aspect-ratio-placeholder';
var AspectRatio = /*#__PURE__*/forwardRef(function (props, ref) {
  var _extends2;
  var _props$className = props.className,
    className = _props$className === void 0 ? DEFAULT_CLASS_NAME : _props$className,
    children = props.children,
    _props$ratio = props.ratio,
    ratio = _props$ratio === void 0 ? 1 : _props$ratio,
    style = props.style,
    restProps = _objectWithoutPropertiesLoose(props, _excluded); // eslint-disable-line no-unused-vars

  var newStyle = _extends({}, style, (_extends2 = {}, _extends2[CUSTOM_PROPERTY_NAME] = "(" + ratio + ")", _extends2));
  return /*#__PURE__*/_jsx("div", _extends({
    className: className,
    style: newStyle,
    ref: ref
  }, restProps, {
    children: children
  }));
});
export default AspectRatio;