React hook to test for content clamping.

useClampCheck.ts

import * as React from 'react';

type ElRef = React.RefCallback<HTMLElement>;

/**
 * Uses content height to determine if an element has been clamped.
 *
 * Useful for creating "Read more" buttons with CSS line-clamp.
 *
 * #### Example:
 * ```jsx
 * const [isClamped, elRef] = useClampCheck();
 * const [expand, setExpand] = React.useState(false);
 *
 * <div ref={elRef} className={expand ? '' : 'line-clamp-2'}>
 *   Lots and lots of words…
 * </div>
 * {isClamped && (
 *   <button onClick={() => setExpand(true)}>
 *     Read more
 *   </button>
 * )}
 * ```
 */
export default function useClampCheck(): [boolean, ElRef] {
  const [clamped, setClamped] = React.useState(false);

  const ref: ElRef = el => setClamped(
    Boolean(el && el.scrollHeight > el.clientHeight)
  );

  return [clamped, ref];
}