React で色を選ぶ入力欄を、input type=”color” と state で作りました。値が小文字の「#rrggbb」で読み出されることや onChange が呼ばれる回数、カラーコード欄と色のボタ ...

価格の下限と上限を2つのつまみで選ぶスライダーを、input type=”range” を2つ重ねて React で作りました。つまみだけがクリックを受ける CSS と、重なったつまみが動かせなくなる問題の直し ...

入力した言葉を Enter や「,」でタグにして並べ、×ボタンや Backspace で消せる入力欄を React で作りました。日本語の変換を確定する Enter、フォームの送信、削除後のフォーカスの扱いも検証環境で確かめています。 ...

検索結果の中で、検索した言葉だけを mark 要素で囲んで強調する部品を React で作りました。正規表現を渡した split で文字列を分ける書き方と、記号で画面が消える、結果が抜けるなどのつまずきを検証環境で確かめています。

画面の上に残るヘッダーを CSS の position: sticky で作り、上に着いたときだけ影を付ける処理を React と IntersectionObserver で書きました。固定されないときに見直す3つの点も、検証環境で ...

パスワードの欄の横に目のアイコンのボタンを置き、押すたびに入力した文字を見せたり隠したりする部品を React で作りました。ボタンの type、aria-pressed の付け方、キーボードでの操作、フォーカスとカーソルの位置を、検 ...

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

フォルダとファイルのような階層を、React でツリー表示する部品を作りました。パスの一覧から入れ子のデータを作る方法、開いているフォルダを Set で持つ理由、role=”tree” の付け方、矢印キーでの操 ...

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

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