react-aspect-ratio
Version:
React Component to maintain a consistent width-to-height ratio (aspect ratio), preventing cumulative layout shift.
17 lines (16 loc) • 838 B
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const CUSTOM_PROPERTY_NAME = '--aspect-ratio';
const DEFAULT_CLASS_NAME = 'react-aspect-ratio-placeholder';
const AspectRatio = (0, react_1.forwardRef)((props, ref) => {
const { className = DEFAULT_CLASS_NAME, children, ratio = 1, style, ...restProps } = props; // eslint-disable-line no-unused-vars
const newStyle = {
...style,
// https://github.com/roderickhsiao/react-aspect-ratio/commit/53ec15858ae186c41e70b8c14cc5a5b6e97cb6e3
[CUSTOM_PROPERTY_NAME]: `(${ratio})`,
};
return ((0, jsx_runtime_1.jsx)("div", { className: className, style: newStyle, ref: ref, ...restProps, children: children }));
});
exports.default = AspectRatio;