テキストが省略されているかどうかの判定を行ってくれる React カスタムフックを作る

import { useState, useCallback } from "react";

export const useTruncated = (
  text?: string,
  truncateMaxWidth?: number
): [(node: HTMLDivElement) => void, boolean | undefined] => {
  const [truncated, setTruncated] = useState(false);
  const ref = useCallback(
    (node) => {
      if (!node) return;
      if (truncateMaxWidth) {
        setTruncated(node.scrollWidth > truncateMaxWidth);
      } else {
        setTruncated(node.scrollWidth > node.offsetWidth);
      }
    },
    // NOTE: 入ってくる text の変更で truncate の判定を行うため無効化
    // eslint-disable-next-line react-hooks/exhaustive-deps
    [text, truncateMaxWidth]
  );
  return [ref, truncated];
};

import { ReactElement } from "react";
import { useTruncated } from "./hooks";
import { Tooltip } from "@material-ui/core";
import "./styles.css";

const TRUNCATE_MAX_WIDTH = 300;

type TruncatableTextProps = {
  text: string;
};

function TruncatableText({ text }: TruncatableTextProps): ReactElement | null {
  const [ref, truncated] = useTruncated(text, TRUNCATE_MAX_WIDTH);

  return (
    <>
      {text && (
        <div
          style={{
            backgroundColor: "lightsalmon"
          }}
        >
          {truncated ? (
            <Tooltip title={text}>
              <div
                ref={ref}
                style={{
                  width: `${TRUNCATE_MAX_WIDTH}px`,
                  overflow: "hidden",
                  whiteSpace: "nowrap",
                  textOverflow: "ellipsis",
                  textAlign: "left",
                  backgroundColor: "pink"
                }}
              >
                {text}
              </div>
            </Tooltip>
          ) : (
            <div
              ref={ref}
              style={{
                width: `${TRUNCATE_MAX_WIDTH}px`,
                overflow: "hidden",
                whiteSpace: "nowrap",
                textOverflow: "ellipsis",
                textAlign: "left",
                backgroundColor: "lime"
              }}
            >
              {text}
            </div>
          )}
        </div>
      )}
    </>
  );
}

export default function App() {
  return (
    <div className="App">
      <TruncatableText text="ダミーテキストダミーテキストダミーテキスト" />
    </div>
  );
}