@leejaehyeok/use-overflow

English | 한국어

A React hook to detect if the children of a container overflow its boundaries using ResizeObserver and MutationObserver.

📦 Installation

npm install @leejaehyeok/use-overflow

🚀 Quick Start

Detect if a container's children exceed its width:

import React from "react";
import { useOverflow } from "@leejaehyeok/use-overflow";

export function MyComponent() {
  const { containerRef, isOverflow } = useOverflow();

  return (
    <div>
      <div ref={containerRef} style={{ display: "flex", overflow: "hidden", width: "200px" }}>
        <div style={{ flexShrink: 0, width: "150px" }}>Item 1</div>
        <div style={{ flexShrink: 0, width: "150px" }}>Item 2</div>
      </div>
      {isOverflow && <p>Content is overflowing!</p>}
    </div>
  );
}

🧠 Key Features

• Accurate Detection: Detects overflow by measuring the actual position of the last child node relative to the container.
• Responsive: Automatically recalculates on size (ResizeObserver) or DOM changes (MutationObserver).
• Targeted Items: Optionally mark specific child nodes with a data-overflow-item attribute to limit observation only to them.
• Performance Optimized: Uses requestAnimationFrame to batch measurements and prevents memory leaks by automatically cleaning up observers.

🔗 Links

• GitHub Repository
• Package Source Code
• Issue Tracker

📄 License

MIT © leejh1316