入力しながら結果が出る検索欄に、デバウンスを入れるカスタムフックを TypeScript で作りました。サーバーへのリクエストが1件にまとまること、古い結果の取り消し、空欄や検索中の表示、日本語の変換中の扱いを、Chrome for ...

コマンドやURLの横に置く「コピー」ボタンを、Reactのカスタムフックとnavigator.clipboard.writeTextで作る方法です。「コピーしました」の表示を2秒で戻す仕組みと、コピーできないときの扱いも確かめました。 ...

OS がダークモードかどうかを、React のコンポーネントで true/false として受け取るカスタムフックの作り方です。matchMedia と useSyncExternalStore を使い、設定の切り替えへの追従、use ...

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

Reactでファイルを送る画面に、プログレスバーで進み具合を表示する方法です。XMLHttpRequest の upload に届く progress イベントで送った量を受け取ります。中止と後片付け、送信後の処理待ちの表示も扱います ...

WebSocketの接続、受信、送信、切れたときのつなぎ直しを、Reactのカスタムフック1つにまとめる方法です。つなぎ直しが止まらなくなる書き方や、外したあとに接続が残る書き方との違いを、検証環境で接続の数を数えて確かめました。

自作のモーダルを閉じると、フォーカスはページの先頭に飛びます。開く前の要素を覚えて、閉じたときに戻すフックの書き方と、autoFocus で覚える要素がずれる落とし穴、元のボタンが消えたときの戻し先を、検証環境で確かめて紹介します。

「/」で検索欄へ移る、Ctrl+Kでコマンドパレットを開くといったショートカットを、Reactのカスタムフック1つにまとめる方法です。入力欄の中では反応させない、押しっぱなしや日本語の変換中は無視する、といった点を検証環境で確かめまし ...

コンポーネントからカスタムフックを切り出し、React Testing Library の renderHook でテストする手順です。result.current の読み方、act、引数を変える rerender、unmount、P ...