入力項目の多いフォームを「連絡先→お届け先→確認」のようにステップに分ける作り方です。値を親にまとめて持つこと、次へ進む操作をformの送信で扱うこと、「戻る」にtype=”button”を付けることを、検証環 ...

React で、いま読んでいる節の見出しを目次で強調する方法です。IntersectionObserver で、見出しが固定ヘッダーの下端を通り過ぎたときだけ位置を計算し、上へ戻ったときや途中から開いたときもずれないようにします。

Reactで animate() を呼び、要素を揺らす、ふわっと出す、薄くして消す、の3つの動きを TypeScript で作る方法です。前の動きの止め方、fill と commitStyles の違い、useEffect でのちらつ ...

選んだCSVファイルを React で読み込み、表にして表示しました。Papa Parse での行の分け方、Shift_JIS のファイルの読み方、列数が合わない行の知らせ方を、実際の出力とともに扱います。

表の各行と見出しにチェックボックスを置き、行をまとめて選べるようにしました。選んだ行を id の Set で持つ書き方、見出しの「一部だけ選択」の表示、Shift を押したクリックでの範囲選択、選んだ行の削除を確かめています。 ...

props でクラスを切り替えるときは、クラス名を省略せずに対応表へ書きます。条件で足すクラスは clsx でまとめ、外から渡すクラスとぶつかるときは tailwind-merge を使います。ビルドした CSS とブラウザの表示で確 ...

React Routerのデータモードでは、ScrollRestorationを1つ置くだけで、戻るボタンで一覧に戻ったときに元のスクロール位置が復元され、新しいページは上から表示されます。ローダーとの関係、getKeyとpreven ...

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

入力に合わせて候補を出すオートコンプリートやサジェストを、↑↓・Enter・Esc で操作できるようにする方法です。React でコンボボックスを作り、フォーカスを入力欄に置いたまま aria-activedescendant で候補 ...

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