flex-wrap-layout/dist/useDetectWrappedElements.js

Experiments with flexbox layout

import { useEffect } from 'react';
import { detectWrappedElements } from './detectWrappedElements';
export const wrapChildrenClassName = 'wrap-children';
export const nextIsWrappedClassName = 'next-is-wrapped';
export const hasChildWrappedClassName = 'has-child-wrapped';
export function useDetectWrappedElements(ref) {
    useEffect(() => {
        const rootElement = ref.current;
        function run() {
            detectWrappedElements(rootElement, wrapChildrenClassName, nextIsWrappedClassName, hasChildWrappedClassName);
        }
        window.addEventListener('resize', run);
        run();
        return () => {
            window.removeEventListener('resize', run);
            const children = rootElement.getElementsByClassName(nextIsWrappedClassName);
            while (children.length > 0) {
                children[0].classList.remove(nextIsWrappedClassName);
            }
            rootElement.classList.remove(hasChildWrappedClassName);
        };
    }, [ref]);
}