react-responsive-pagination/dist/hooks/useFoutDetector.js

React component for responsive pagination

import { useRef } from 'react';
import { useIsomorphicLayoutEffect } from "../helpers/react.js";
import { getWidth } from "../helpers/style.js";
import { flushSync } from 'react-dom';
export function useFoutDetector(getElements, handleFout) {
    const containerRef = useRef(null);
    useIsomorphicLayoutEffect(() => {
        const elements = getElements(containerRef.current);
        if (!elements)
            return;
        const widthsAtRender = new Map(elements.map(element => [element, getWidth(element)]));
        const resizeObserver = new ResizeObserver(entries => {
            const hasAnElementChangedSignificantly = entries
                .map(entry => widthsAtRender.get(entry.target) - getWidth(entry.target))
                .some(difference => difference < -0.5 || difference > 0.5);
            hasAnElementChangedSignificantly && flushSync(handleFout);
        });
        elements.forEach(element => resizeObserver.observe(element));
        return () => resizeObserver.disconnect();
    });
    return containerRef;
}