pagamio-frontend-commons-lib/lib/shared/hooks/useContainerWidth.js

Pagamio library for Frontend reusable components like the form engine and table container

import { useEffect, useRef, useState } from 'react';
export function useContainerWidth() {
    const containerRef = useRef(null);
    const [containerWidth, setContainerWidth] = useState(0);
    useEffect(() => {
        const updateWidth = () => {
            if (containerRef.current) {
                setContainerWidth(containerRef.current.offsetWidth);
            }
        };
        // Measure once on mount
        updateWidth();
        // Re-measure on window resize
        window.addEventListener('resize', updateWidth);
        return () => window.removeEventListener('resize', updateWidth);
    }, []);
    return [containerRef, containerWidth];
}