パソコンのファイルをドラッグして置ける場所を、React と TypeScript で作りました。drop を受け取る条件、強調のちらつきを防ぐ数え方、枠の外へのドロップの止め方、ボタンからの選択を扱います。

入力した文字で候補を絞り込むコンボボックスを、↑↓・Enter・Esc で操作できるように React と TypeScript で作りました。フォーカスを入力欄に置いたまま aria-activedescendant で候補を指す書 ...

「保存しました」のようなトースト通知を、ライブラリを使わずにReactで作る方法です。どこからでも呼べるtoast()、一定時間で消すタイマー、マウスやフォーカスで止める処理、読み上げ用の領域、モーダルのdialogとの関係を確かめま ...

送信ボタンを続けて押しても、注文が1件だけ作られるようにする方法です。送信中にボタンを無効にする書き方、refで止める書き方、formのactionの場合と、サーバー側でIdempotency-Keyを使う方法を確かめました。 ...

メニューやドロップダウンを、外側をクリックしたら閉じるカスタムフックを TypeScript で作りました。開くボタンを内側に入れる理由、click ではなく pointerdown を待つ理由、ポータルの中の扱い、タッチ操作での動き ...

React で img に loading=”lazy” を付けて遅延読み込みし、onLoad と onError で読み込み中の表示を出す方法です。width・height、key での作り直し、ハイドレーシ ...

react-markdownは、何も設定しなければMarkdownの中のHTMLを文字のまま表示し、javascript:のリンクも消します。rehype-sanitizeの置き場所と、HTMLを使わないときの設定を確かめました。

自作のモーダルを開いている間、後ろの画面を包む要素に inert を付けると、Tab キーのフォーカスもクリックも届かなくなり、アクセシビリティツリーからも外れます。React 19 での書き方、モーダルを inert の外に置く理由 ...

入力したまま保存していない内容を、うっかり捨てないための確認の出し方です。再読み込みやタブを閉じる操作はbeforeunloadで、アプリの中の画面移動はReact RouterのuseBlockerで止める方法を、検証環境で確かめま ...

ReactでServer-Sent Eventsの通知を受け取る方法です。名前付きイベントの受け取り方、つなぎ直しとLast-Event-IDでの取りこぼし防止、同じオリジンへの接続が6本で止まる制限を検証環境で確かめました。 ...