@elacity-js/uikit/dist/hooks/useSquareElement.js

React / Material UI Design kit for Elacity project

import { useEffect } from 'react';

const makeSquareByWidth = ($el) => {
    const width = $el.clientWidth;
    $el.style.height = `${width}px`;
};
const makeSquareByHeight = ($el) => {
    const height = $el.clientHeight;
    $el.style.width = `${height}px`;
};
var useSquareElement = ($el, by) => {
    let sizer = ($el) => { };
    if (!by || by === 'width') {
        sizer = makeSquareByWidth;
    }
    else {
        sizer = makeSquareByHeight;
    }
    useEffect(() => {
        // set size according to actual dimension of the element
        // and the anchor we should rely on: width or height
        if ($el) {
            sizer($el);
        }
        // handle resize events
        const handleResize = () => {
            if ($el) {
                sizer($el);
            }
        };
        window.addEventListener('resize', handleResize);
        return window.removeEventListener('resize', handleResize);
    }, [$el]);
};

export { useSquareElement as default };
//# sourceMappingURL=useSquareElement.js.map