contentEditable の div と B ボタンで、選んだ文字を太字にする入力欄を作る方法です。React に中身を描き直させない書き方、ボタンを押してもフォーカスを入力欄に残す方法、ボタンの押された状態の出し方、書式つきの ...

画像の上の番号付きの点を押すと、その場所の説明が出るコンポーネントを React と TypeScript で作りました。点の位置を % で持つ方法、Esc キーと外側のクリックで閉じる作り、狭い画面で説明をはみ出させない幅の決め方を ...

検索した語を localStorage に新しい順で残し、検索欄にフォーカスしたときに候補として出す方法です。候補を押す前に一覧が閉じる問題、消えたボタンからフォーカスが外れる問題、2つのタブで履歴を上書きし合う問題を、Chromiu ...

左右の一覧でチェックした項目をボタンで移す部品を、React で作る書き方です。左右の配列は state に持たず、右にある項目の id だけを持つと、何度移しても元の並び順が崩れません。絞り込みで隠れた項目を移さない工夫と、移すボタ ...

React の Suspense の fallback に、読み込み後と同じ形のスケルトンを渡す方法です。帯の高さを文字の行に合わせて下の段落を動かさない作り、文章の行数の決め方、読み上げと動きを減らす設定への配慮を、Chromium ...

1日を1列にした CSS Grid に、開始日と終了日から求めた grid-column で予定の横棒を置きました。日付は Date.UTC で日数に直し、表示期間からはみ出す棒は切り落とします。作業名の列を sticky で残す方法 ...

項目からさらにメニューが開く、入れ子のドロップダウンメニューを React で作りました。開いている枝を id の配列1つで持ち、同じ描画関数を再帰で呼びます。斜めにポインターを動かしたときの誤作動の防ぎ方と、矢印キーでの操作も確かめ ...

React Routerのデータモードで、ルートのhandleに項目名を書き、useMatchesで集めてパンくずリストを作りました。loaderのデータを項目名に使う方法、indexルートとの関係、移動中とエラーのときの表示、区切り ...

時刻を選ぶ入力欄を、input type=”time” と React の state で作りました。15分単位にする step、日付をまたぐ min と max、表示と value の形の違い、ピッカーに s ...

Ctrl+K で開き、言葉を打って絞り込み、↑↓と Enter で実行するコマンドパレットを、React と dialog 要素で作りました。ひらがなとカタカナを区別しない絞り込みと、実行と閉じる順番によるフォーカスの違いを確かめてい ...