react-detect-overflow 1.0.0 → 1.1.0

package/README.md

@@ -2,16 +2,6 @@
 
 React hooks for detecting horizontal and vertical overflow on DOM elements. Reactively updates when the element is resized.
 
-## Installation
-
-```bash
-npm install react-detect-overflow
-```
-
-## Requirements
-
-- React `v16.8.0` or later
-
 ---
 
 ## Usage

package/dist/index.cjs

@@ -1,20 +1,6 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 let e = require("react");
 //#region src/overflow.tsx
-/**
-* Base hook for detecting overflow on a DOM element given axis.
-* Observes the element for size changes and recomputes overflow reactively.
-*
-* @param getSizes - A function that extracts scroll and client sizes from the element
-* @param externRef - An optional external ref to attach to the element. If not provided, an internal ref is created.
-* @returns An object containing overflow state and the ref to attach to the element
-*
-* @example
-* // Custom axis (e.g. both dimensions summed)
-* const { isOverflowing, ref } = useDetectOverflow(
-*   (el) => ({ scrollSize: el.scrollWidth, clientSize: el.clientWidth }),
-* );
-*/
 function t(t, n) {
 	let r = (0, e.useRef)(null), i = (0, e.useRef)(t), a = n ?? r;
 	(0, e.useLayoutEffect)(() => {
@@ -46,44 +32,16 @@ function t(t, n) {
 }
 //#endregion
 //#region src/index.tsx
-/**
-* Detects horizontal (X-axis) overflow on a DOM element.
-* Reactively updates when the element is resized.
-*
-* @param externRef - An optional external ref. If not provided, an internal ref is created.
-* @returns `isOverflowing` — whether the element overflows horizontally
-* @returns `amount` — the number of overflowing pixels
-* @returns `ratio` — `scrollWidth / clientWidth` (1 means no overflow)
-* @returns `ref` — attach this to the element you want to observe
-*
-* @example
-* const { isOverflowing, amount, ratio, ref } = useDetectOverflowX();
-* return <div ref={ref}>...</div>;
-*/
 function n(e) {
 	return t((e) => ({
 		scrollSize: e.scrollWidth,
 		clientSize: e.clientWidth
 	}), e);
 }
-/**
-* Detects vertical (Y-axis) overflow on a DOM element.
-* Reactively updates when the element is resized.
-*
-* @param externRef - An optional external ref. If not provided, an internal ref is created.
-* @returns `isOverflowing` — whether the element overflows vertically
-* @returns `amount` — the number of overflowing pixels
-* @returns `ratio` — `scrollHeight / clientHeight` (1 means no overflow)
-* @returns `ref` — attach this to the element you want to observe
-*
-* @example
-* const { isOverflowing, amount, ratio, ref } = useDetectOverflowY();
-* return <div ref={ref}>...</div>;
-*/
 function r(e) {
 	return t((e) => ({
 		scrollSize: e.scrollHeight,
 		clientSize: e.clientHeight
 	}), e);
 }
-exports.useDetectOverflowX = n, exports.useDetectOverflowY = r;
+exports.useDetectOverflow = t, exports.useDetectOverflowX = n, exports.useDetectOverflowY = r;

package/dist/index.d.cts

@@ -7,6 +7,35 @@ type DetectOverflow<T> = {
   ratio: number;
   ref: RefObject<T | null>;
 };
+/**
+ * A function that extracts the scroll and client sizes from a DOM element,
+ * used to determine the axis of overflow detection.
+ *
+ * @example
+ * // Horizontal axis
+ * const getSizes: GetSizes = (el) => ({ scrollSize: el.scrollWidth, clientSize: el.clientWidth });
+ */
+type GetSizes = (element: Element) => {
+  scrollSize: number;
+  clientSize: number;
+};
+//#endregion
+//#region src/overflow.d.ts
+/**
+ * Base hook for detecting overflow on a DOM element given axis.
+ * Observes the element for size changes and recomputes overflow reactively.
+ *
+ * @param getSizes - A function that extracts scroll and client sizes from the element
+ * @param externRef - An optional external ref to attach to the element. If not provided, an internal ref is created.
+ * @returns An object containing overflow state and the ref to attach to the element
+ *
+ * @example
+ * // Custom axis (e.g. both dimensions summed)
+ * const { isOverflowing, ref } = useDetectOverflow(
+ *   (el) => ({ scrollSize: el.scrollWidth, clientSize: el.clientWidth }),
+ * );
+ */
+declare function useDetectOverflow<T extends HTMLElement>(getSizes: GetSizes, externRef?: RefObject<T | null>): DetectOverflow<T>;
 //#endregion
 //#region src/index.d.ts
 /**
@@ -40,4 +69,4 @@ declare function useDetectOverflowX<T extends HTMLElement>(externRef?: RefObject
  */
 declare function useDetectOverflowY<T extends HTMLElement>(externRef?: RefObject<T | null>): DetectOverflow<T>;
 //#endregion
-export { useDetectOverflowX, useDetectOverflowY };
+export { useDetectOverflow, useDetectOverflowX, useDetectOverflowY };

package/dist/index.d.mts

@@ -7,6 +7,35 @@ type DetectOverflow<T> = {
   ratio: number;
   ref: RefObject<T | null>;
 };
+/**
+ * A function that extracts the scroll and client sizes from a DOM element,
+ * used to determine the axis of overflow detection.
+ *
+ * @example
+ * // Horizontal axis
+ * const getSizes: GetSizes = (el) => ({ scrollSize: el.scrollWidth, clientSize: el.clientWidth });
+ */
+type GetSizes = (element: Element) => {
+  scrollSize: number;
+  clientSize: number;
+};
+//#endregion
+//#region src/overflow.d.ts
+/**
+ * Base hook for detecting overflow on a DOM element given axis.
+ * Observes the element for size changes and recomputes overflow reactively.
+ *
+ * @param getSizes - A function that extracts scroll and client sizes from the element
+ * @param externRef - An optional external ref to attach to the element. If not provided, an internal ref is created.
+ * @returns An object containing overflow state and the ref to attach to the element
+ *
+ * @example
+ * // Custom axis (e.g. both dimensions summed)
+ * const { isOverflowing, ref } = useDetectOverflow(
+ *   (el) => ({ scrollSize: el.scrollWidth, clientSize: el.clientWidth }),
+ * );
+ */
+declare function useDetectOverflow<T extends HTMLElement>(getSizes: GetSizes, externRef?: RefObject<T | null>): DetectOverflow<T>;
 //#endregion
 //#region src/index.d.ts
 /**
@@ -40,4 +69,4 @@ declare function useDetectOverflowX<T extends HTMLElement>(externRef?: RefObject
  */
 declare function useDetectOverflowY<T extends HTMLElement>(externRef?: RefObject<T | null>): DetectOverflow<T>;
 //#endregion
-export { useDetectOverflowX, useDetectOverflowY };
+export { useDetectOverflow, useDetectOverflowX, useDetectOverflowY };

package/dist/index.mjs

@@ -1,19 +1,5 @@
 import { useCallback as e, useLayoutEffect as t, useRef as n, useState as r } from "react";
 //#region src/overflow.tsx
-/**
-* Base hook for detecting overflow on a DOM element given axis.
-* Observes the element for size changes and recomputes overflow reactively.
-*
-* @param getSizes - A function that extracts scroll and client sizes from the element
-* @param externRef - An optional external ref to attach to the element. If not provided, an internal ref is created.
-* @returns An object containing overflow state and the ref to attach to the element
-*
-* @example
-* // Custom axis (e.g. both dimensions summed)
-* const { isOverflowing, ref } = useDetectOverflow(
-*   (el) => ({ scrollSize: el.scrollWidth, clientSize: el.clientWidth }),
-* );
-*/
 function i(i, a) {
 	let o = n(null), s = n(i), c = a ?? o;
 	t(() => {
@@ -45,40 +31,12 @@ function i(i, a) {
 }
 //#endregion
 //#region src/index.tsx
-/**
-* Detects horizontal (X-axis) overflow on a DOM element.
-* Reactively updates when the element is resized.
-*
-* @param externRef - An optional external ref. If not provided, an internal ref is created.
-* @returns `isOverflowing` — whether the element overflows horizontally
-* @returns `amount` — the number of overflowing pixels
-* @returns `ratio` — `scrollWidth / clientWidth` (1 means no overflow)
-* @returns `ref` — attach this to the element you want to observe
-*
-* @example
-* const { isOverflowing, amount, ratio, ref } = useDetectOverflowX();
-* return <div ref={ref}>...</div>;
-*/
 function a(e) {
 	return i((e) => ({
 		scrollSize: e.scrollWidth,
 		clientSize: e.clientWidth
 	}), e);
 }
-/**
-* Detects vertical (Y-axis) overflow on a DOM element.
-* Reactively updates when the element is resized.
-*
-* @param externRef - An optional external ref. If not provided, an internal ref is created.
-* @returns `isOverflowing` — whether the element overflows vertically
-* @returns `amount` — the number of overflowing pixels
-* @returns `ratio` — `scrollHeight / clientHeight` (1 means no overflow)
-* @returns `ref` — attach this to the element you want to observe
-*
-* @example
-* const { isOverflowing, amount, ratio, ref } = useDetectOverflowY();
-* return <div ref={ref}>...</div>;
-*/
 function o(e) {
 	return i((e) => ({
 		scrollSize: e.scrollHeight,
@@ -86,4 +44,4 @@ function o(e) {
 	}), e);
 }
 //#endregion
-export { a as useDetectOverflowX, o as useDetectOverflowY };
+export { i as useDetectOverflow, a as useDetectOverflowX, o as useDetectOverflowY };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-detect-overflow",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "",
   "type": "module",
   "main": "dist/index.cjs",