見出しが枠からはみ出さないように、収まるいちばん大きい文字の大きさを React で測って決める方法です。二分探索で font-size を試し、枠の幅の変化と Web フォントの読み込みに合わせて測り直します。

HTML で置いた2つの箱を、上に重ねた SVG の曲線と矢印でつなぎました。箱の位置を SVG の左上からの座標に直して描き、箱が動いたときと大きさが変わったときに測り直します。矢印の id を useId で作る理由も確かめました ...

お知らせの文字を右から左へ流し続ける React のコンポーネントです。同じリストを2つ並べて CSS アニメーションで半分だけ動かし、つなぎ目をなくします。一時停止ボタン、キーボード操作、動きを減らす設定への対応も入れています。

高さの違うカードを、列の中ですき間なく並べる表示を、ライブラリを使わずに React で作りました。画像入りのカードの一覧を、メイソンリーと呼ばれる並べ方で見せたいときに使えます。カードをいちばん短い列の下へ置いていく計算と、Resi ...

記事をどこまで読んだかを画面の上のバーで示すフックを、React で作りました。割合はページ全体ではなく記事の要素から計算し、画像の読み込みで記事の高さが変わったときも ResizeObserver で計算し直します。CSS だけで作 ...

長い文章を3行で切って「続きを読む」ボタンで広げるコンポーネントを TypeScript で作りました。行数で切る CSS、はみ出したときだけボタンを出す測り方、隠れた部分のリンクに Tab で入ったときの対策を Chromium で ...

チャットの一覧で、新しいメッセージが届いたら一番下までスクロールし、上の会話を読んでいる間は動かさずに「新着○件」のボタンを出す部品を React で作りました。下にいるかの判定のタイミング、画像の読み込み、scrollIntoVie ...

画面の幅ではなく、置かれた場所の幅に合わせてReactのコンポーネントの表示を切り替える、レスポンシブな部品の作り方です。ResizeObserver を ref のコールバックで登録するフックを作り、描画の回数、ボックスの違い、表示 ...