【React】文字数を制限するカスタムフックの作り方

文字数が多いとき、...とするときに使えるカスタムフックを作りました

export const useMakeString = (content: string, maxContentLength: number) => {
  if (content.length > maxContentLength) {
    return content.substring(0, maxContentLength) + "...";
  }
  return content;
};

実際の使用方法

export const sample = () => {
  const title = "これは長めのタイトル文です。表示するときにはみ出てしまいます。";
　const displayTitle = useMakeString(title, 15);
  return <div>{displayTitle }</div>;
};

2022/05/19追記

こんなことしなくてもcss(tailwind.css)で下のように書けばやりたいことが実現できる

 <div className="truncate">一行を超える文章</div>