Reactで、文字が横に流れ続けるお知らせを作る方法

.ticker { display: flex; align-items: center; gap: 8px; padding: 6px 8px;
  background: #eefafd; border: 1px solid #00c8e8; border-radius: 6px; }
.ticker-viewport { flex: 1; min-width: 0; overflow: hidden; }
.ticker-track { display: flex; width: max-content; }
.ticker-track[data-scrolling="true"] { animation: ticker var(--ticker-duration) linear infinite; }
/* 一時停止ボタンを押したときと、マウスを乗せている間は、その位置で止める */
.ticker-track[data-paused="true"],
.ticker-viewport:hover .ticker-track { animation-play-state: paused; }
/* 中のリンクにフォーカスがある間は、流れる前の位置に戻し、枠のスクロールでリンクを見せる */
.ticker-viewport:focus-within .ticker-track { animation: none; }
/* 同じ内容を2つ並べているので、半分（1つ分）動かすと最初と同じ見た目に戻る */
@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.ticker-list { display: flex; flex: none; margin: 0; padding: 0; list-style: none; }
.ticker-list li { padding-right: 3em; white-space: nowrap; }
.ticker-toggle { flex: none; font: inherit; padding: 2px 10px; }

@media (prefers-reduced-motion: reduce) {
  .ticker-track[data-scrolling="true"] { animation: none; }
  .ticker-viewport { overflow-x: auto; }
  .ticker-list[aria-hidden="true"], .ticker-toggle { display: none; }
}

import { NewsTicker, type News } from './NewsTicker';

const LONG: News[] = [
  { id: '1', text: '11月3日（火）はサポート窓口をお休みします', href: '#holiday' },
  { id: '2', text: '新しい料金プランの受付を始めました', href: '#plan' },
  { id: '3', text: '11月10日 2:00〜4:00 にメンテナンスを行います', href: '#maintenance' },
];

export function App() {
  return <NewsTicker items={LONG} />;
}

import { useLayoutEffect, useRef, useState, type CSSProperties, type FocusEvent } from 'react';

export type News = { id: string; text: string; href?: string };

type Props = {
  items: News[];
  // 1秒間に流れる距離（px）。お知らせの長さが変わっても、流れる速さは変わらない
  speed?: number;
};

export function NewsTicker({ items, speed = 60 }: Props) {
  const viewportRef = useRef<HTMLDivElement>(null);
  const listRef = useRef<HTMLUListElement>(null);
  const [listWidth, setListWidth] = useState(0);
  const [overflowing, setOverflowing] = useState(false);
  const [paused, setPaused] = useState(false);

  // お知らせの幅と表示枠の幅を測り、枠に収まらないときだけ流す
  useLayoutEffect(() => {
    const viewport = viewportRef.current!;
    const list = listRef.current!;
    const measure = () => {
      const w = list.getBoundingClientRect().width;
      setListWidth(w);
      setOverflowing(w > viewport.clientWidth);
    };
    measure();
    const observer = new ResizeObserver(measure);
    observer.observe(viewport);
    observer.observe(list);
    return () => observer.disconnect();
  }, []);

  // フォーカスしたリンクの頭が枠の左端に来るように、枠を横にスクロールする
  const handleFocus = (e: FocusEvent<HTMLDivElement>) => {
    const viewport = e.currentTarget;
    viewport.scrollLeft += e.target.getBoundingClientRect().left - viewport.getBoundingClientRect().left;
  };

  // フォーカスが枠の外へ出たら、スクロールを元に戻す
  const handleBlur = (e: FocusEvent<HTMLDivElement>) => {
    if (!e.currentTarget.contains(e.relatedTarget)) e.currentTarget.scrollLeft = 0;
  };

  const renderItems = () =>
    items.map((item) => (
      <li key={item.id}>{item.href ? <a href={item.href}>{item.text}</a> : item.text}</li>
    ));

  return (
    <section className="ticker" aria-label="お知らせ">
      <div ref={viewportRef} className="ticker-viewport" onFocus={handleFocus} onBlur={handleBlur}>
        <div
          className="ticker-track"
          data-scrolling={overflowing}
          data-paused={paused}
          style={{ '--ticker-duration': `${listWidth / speed}s` } as CSSProperties}
        >
          <ul ref={listRef} className="ticker-list">
            {renderItems()}
          </ul>
          {/* つなぎ目なく流すための複製。読み上げとキーボード操作の対象から外す */}
          {overflowing && (
            <ul className="ticker-list" aria-hidden="true" inert>
              {renderItems()}
            </ul>
          )}
        </div>
      </div>
      {overflowing && (
        <button type="button" className="ticker-toggle" onClick={() => setPaused((p) => !p)}>
          {paused ? '再生' : '一時停止'}
        </button>
      )}
    </section>
  );
}