useHasOverflow

Check if a ref element has overflow in the x or y dimension, it means that its content is too long to fit in the element. Useful to handle conditional rendering or styling. The hook has an opional dependency array to control when to recalculate the hasOverflow state.

Usage

useHasOverflow takes an element ref with the following options:

• dimension: one of x or y, Default is y.
• dependencies: the dependencies for which you wish to recalculate the hasOverflow state.

The hook returns a boolean.

import { useRef } from "react";
import { useHasOverflow } from "swash/utils/useHasOverflow";

function Example({ title }) {
  const ref = useRef(null);
  const hasOverflow = useHasOverflow({ ref, dimension: "x" });

  return (
    <div ref={ref} className="truncate">
      {title}
    </div>
  );
}