セクションの背景だけを、スクロールの半分の速さで動かすパララックスを作りました。背景をはみ出させる量の決め方、ずらす量を state に入れない理由、動きを減らす設定への対応、CSS だけで書く方法を確かめています。

表の見出しの右端の取っ手をドラッグして、列の幅を変えられるようにしました。幅を state に持って col に渡し、table-layout: fixed と表の幅の指定で、そのとおりに描かせます。ダブルクリックで中身に合わせる方法 ...

開きっぱなしの React の画面に、新しい版の公開を知らせて読み込み直してもらう方法です。デプロイのあとも古い画面を開いたままの人に、新しい版へ移ってもらいたいときに使えます。ビルドのたびに版の名前を画面と version.json ...

孫まで続くチェックボックスで、子が一部だけ選ばれた親に横線を出す書き方です。選べる項目を「すべて」で全選択する、絞り込みの一覧にも使えます。選んだ項目の id だけを state に持ち、親の表示は毎回数えて決めます。横線を出す in ...

操作がないまま一定時間たつと自動でログアウトする画面に、残り時間を出す警告のダイアログと「ログインを続ける」ボタンを付けます。期限と現在時刻の差で状態を決めるフックを作り、警告中の操作や複数のタブでの動きを検証環境で確かめました。

マウスや指でつまみを回して音量などの値を変えるダイヤルを、ライブラリを使わずに React で作りました。ポインターの向きを Math.atan2 で求め、前回からの差を足していくと、真下を越えても値が飛びません。キーボードでも操作で ...

選んだ絵文字をテキストエリアのキャレットの位置に入れるピッカーを React と TypeScript で作りました。Ctrl+Z で戻せる入れ方、矢印キーでの選び方、最近使った絵文字の保存を Chromium で確かめました。

テキストエリアで「@」を打つと名前の候補を出し、選ぶと「@名前 」を入れる入力欄を React と TypeScript で作りました。キャレットの前の文字の調べ方、選んだあとのキャレットの戻し方、一覧を「@」の位置に出す方法を Ch ...

要素が画面に入ったら、透明な状態から、少し下の位置からせり上がるように表示するフックを作りました。ページを読み進めるにつれて、カードなどを1つずつフェードインさせたいときに使えます。一度表示したら消さない作り方、横に並んだ要素を順に出 ...

入力したパスワードの強さを、React で5本のバーと「弱い」「強い」などの言葉で表示します。判定は zxcvbn-ts に任せ、重い計算は Web Worker に移し、メールアドレスの一部を使ったパスワードも弱いと出るようにしまし ...