react-box-overflow/dist/esm/useOverflow.js

Headless UI for automatically collapsing boxes when overflow in React.

import { BoxOverflow } from "box-overflow-core";
import { useReducer, useRef, useEffect, useLayoutEffect } from "react";
import { useRefFn } from "./useRefFn.js";
const useIsomorphicLayoutEffect = typeof document !== "undefined" ? useLayoutEffect : useEffect;
function useOverflow(options) {
  const [, forceRenderer] = useReducer(() => {
    return [];
  }, []);
  const onDisplayChange = useRefFn((items) => {
    var _a;
    forceRenderer();
    (_a = options.onDisplayChange) == null ? void 0 : _a.call(options, items);
  });
  const mergedOptions = {
    ...options,
    onDisplayChange
  };
  const instance = useRef(new BoxOverflow(mergedOptions));
  useEffect(() => {
    return instance.current.onMount();
  }, []);
  useIsomorphicLayoutEffect(() => {
    return instance.current.onUpdate();
  });
  useLayoutEffect(() => {
    instance.current.setOptions(mergedOptions);
  }, [options]);
  return instance.current;
}
export {
  useOverflow
};
//# sourceMappingURL=useOverflow.js.map