Reactで、長い文章を「続きを読む」で折りたたむ方法

a: style="line-clamp: 3" clientHeight=218 scrollHeight=218
b: style="-webkit-line-clamp: 3" clientHeight=218 scrollHeight=218
c: style="display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3" clientHeight=82 scrollHeight=218

.read-more-text.clamped { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }

import { useId, useLayoutEffect, useRef, useState, type ReactNode } from 'react';

type Props = { children: ReactNode; lines?: number };

export function ReadMore({ children, lines = 3 }: Props) {
  const ref = useRef<HTMLDivElement>(null);
  const id = useId();
  const [expanded, setExpanded] = useState(false);
  const [overflowing, setOverflowing] = useState(false);

  // 折りたたんでいる間だけ、文章がはみ出しているかを測る（幅が変わったら測り直す）
  useLayoutEffect(() => {
    if (expanded) return;
    const el = ref.current!;
    const measure = () => setOverflowing(el.scrollHeight > el.clientHeight);
    measure();
    const observer = new ResizeObserver(measure);
    observer.observe(el);
    return () => observer.disconnect();
  }, [expanded, children]);

  return (
    <div className="read-more">
      <div
        ref={ref}
        id={id}
        className={expanded ? 'read-more-text' : 'read-more-text clamped'}
        style={{ WebkitLineClamp: lines }}
        // 隠れた部分のリンクなどに Tab で入ったら、広げて見えるようにする
        onFocus={() => setExpanded(true)}
      >
        {children}
      </div>
      {(overflowing || expanded) && (
        <button
          type="button"
          aria-expanded={expanded}
          aria-controls={id}
          onClick={() => setExpanded(!expanded)}
        >
          {expanded ? '閉じる' : '続きを読む'}
        </button>
      )}
    </div>
  );
}

import { ReadMore } from './ReadMore';

export function App() {
  return (
    <main>
      <section data-testid="long">
        <h2>長い文章</h2>
        <ReadMore>
          <p>
            吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。
            （<a href="https://www.aozora.gr.jp/">青空文庫</a>より）
          </p>
        </ReadMore>
      </section>
      <section data-testid="short">
        <h2>短い文章</h2>
        <ReadMore>
          <p>吾輩は猫である。名前はまだ無い。</p>
        </ReadMore>
      </section>
      <button type="button">次のボタン</button>
    </main>
  );
}

長い文章: clientHeight=82 scrollHeight=218 scrollTop=0 / ボタン「続きを読む」 aria-expanded=false
短い文章: clientHeight=27 scrollHeight=27 scrollTop=0 / ボタン なし

幅 800px: clientHeight=82 scrollHeight=109 scrollTop=0 / ボタン「続きを読む」 aria-expanded=false
幅 900px: clientHeight=82 scrollHeight=109 scrollTop=0 / ボタン「続きを読む」 aria-expanded=false
幅 1000px: clientHeight=82 scrollHeight=82 scrollTop=0 / ボタン なし
幅 390px: clientHeight=82 scrollHeight=218 scrollTop=0 / ボタン「続きを読む」 aria-expanded=false

1回目: clientHeight=218 scrollHeight=218 scrollTop=0 / ボタン「閉じる」 aria-expanded=true / フォーカス button「閉じる」
2回目: clientHeight=82 scrollHeight=218 scrollTop=0 / ボタン「続きを読む」 aria-expanded=false / フォーカス button「続きを読む」

- heading "長い文章" [level=2]
- paragraph:
  - text: 吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。 （
  - link "青空文庫":
    - /url: https://www.aozora.gr.jp/
  - text: より）
- button "続きを読む"

Tab 1回目: フォーカス a「青空文庫」 / clientHeight=82 scrollHeight=218 scrollTop=136 / ボタン「続きを読む」 aria-expanded=false
Tab 2回目: フォーカス button「続きを読む」 / clientHeight=82 scrollHeight=218 scrollTop=136 / ボタン「続きを読む」 aria-expanded=false
Tab 3回目: フォーカス button「次のボタン」 / clientHeight=82 scrollHeight=218 scrollTop=136 / ボタン「続きを読む」 aria-expanded=false

Tab 1回目: フォーカス a「青空文庫」 / clientHeight=218 scrollHeight=218 scrollTop=0 / ボタン「閉じる」 aria-expanded=true
Tab 2回目: フォーカス button「閉じる」 / clientHeight=218 scrollHeight=218 scrollTop=0 / ボタン「閉じる」 aria-expanded=true
Tab 3回目: フォーカス button「次のボタン」 / clientHeight=218 scrollHeight=218 scrollTop=0 / ボタン「閉じる」 aria-expanded=true