サイドバーと本文のあいだの取っ手をドラッグして、幅を変えられるようにする部品を React と TypeScript で作りました。setPointerCapture、文字の選択とタッチの対策、キーボード操作、幅の保存を順に確かめてい ...

画面の端にあるボタンのツールチップが切れないように、位置を計算するフックを TypeScript で作りました。上に入らなければ下に回し、左右は画面の内側にずらし、矢印はボタンを指したままにします。Floating UI と CSS ...

入力項目の多いフォームを「連絡先→お届け先→確認」のようにステップに分ける作り方です。値を親にまとめて持つこと、次へ進む操作を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 を受け取る条件、強調のちらつきを防ぐ数え方、枠の外へのドロップの止め方、ボタンからの選択を扱います。