入力欄の下に「あと○文字」を出し、上限が近づいたら色を変え、超えたら送信を止める部品を React で作りました。絵文字を1文字と数える方法、maxLength で入力を止めたときに起きること、変換中の文字の扱いを、検証環境で確かめて ...

開始日と終了日を選ぶ入力欄を、input type=”date” を2つ並べて React で作りました。終了日の min に開始日を渡す書き方、開始日を後ろにずらしたときの扱い、送信される値、日数の計算での夏 ...

星をクリックして1〜5の評価を選ぶ入力欄を、React と radio ボタンで作りました。マウスを乗せたときの見え方、矢印キーでの操作、フォームで送られる値、必須にしたときの動きを、検証環境で確かめています。

指でめくると1枚ずつ止まる画像のカルーセルを、React と CSS Scroll Snap で作りました。前へ・次へのボタン、何枚目かの表示、ページが縦に動かないめくり方、画面の幅が変わったときの動きを、検証環境で確かめています。

details と summary でアコーディオンを作ると、開閉とキーボード操作はブラウザに任せられます。React の state で開閉を持つときに onToggle が要る理由、name 属性で1つだけ開く作り、三角の消し方と ...

タブを ←→・Home・End で切り替えられるように、React と TypeScript で作りました。Tab キーで止まるタブを1つにする tabindex の付け方、ref の配列でフォーカスを動かす書き方、Enter で切り ...

React Routerのデータモードでは、ローダーを待つあいだ前の画面が残ります。useNavigationで画面上部に読み込みバーを出す方法、NavLinkのpendingクラスとisPendingで、押したリンクの文字を灰色にし ...

一覧を10件ずつに分け、「1 … 4 5 6 … 10」のようなページ番号のボタンで切り替える部品を、ReactとTypeScriptで作りました。番号の並びを決める関数、ボタンのkeyの選び方、最後のページでのフォーカス、件数が減っ ...

選んだ画像をブラウザの中で縮小し、送る前にプレビューする方法を React と TypeScript で確かめました。canvas で JPEG にする関数、選び直したときの古い結果の捨て方、透明な PNG と画像の向きにも触れます。 ...

入力欄に Ctrl+V で貼り付けた画像を、React で受け取って一覧に表示する方法です。onPaste で画像を取り出す方法、文字の貼り付けを邪魔しない書き方、表示用の URL の作り方と解放のしかたを確かめました。