komlev/tiny-use-detect-horizontal-overflow

tiny-use-detect-horizontal-overflow

Small (~1 Kb) react hook for detecting items are overflown. Something like this:

Screen.Recording.2022-08-27.at.14.14.22.mp4

Usage

npm i tiny-use-detect-horizontal-overflow --save

And in your react code

import { useDetectHorizontalOverflow } from "tiny-use-detect-horizontal-overflow";

// ...

useDetectHorizontalOverflow(containerRef, (hiddenElements) => {
  console.log(hiddenElements)
  /*
    It'll print out hidden elements which are overflown by container
    (4) [li#Membeship, li#Register, li#Login, li#Learn]
  */
});

API

Usage: Let's say you have this JSX component

<div className="container" ref={containerRef}>
  <ul className="links_list" ref={listRef}>
    <li>
      <a href="/about">About</a>
    </li>
    {/*...*/}
  </ul>
</div>

And in order to use this hook:

useDetectHorizontalOverflow(
  containerRef, // react ref of container
  (entries) => {}, // callback which will be called when number of hidden element is changed
  listRef, // optional react ref for items parent - if items are not direct children of the container
  throttleTimeout // optional timeout throttle timeout for resize callback, default is 16ms
);

License

MIT