一覧を10件ずつに分け、「1 … 4 5 6 … 10」のようなページ番号のボタンで切り替える部品を、ReactとTypeScriptで作りました。絞り込みや削除で件数が変わる一覧のページネーションに使えます。番号の並びを決める関数、 ...

入力欄に Ctrl+V で貼り付けた画像を、React で受け取って一覧に表示する方法です。onPaste で画像を取り出す方法、文字の貼り付けを邪魔しない書き方、表示用の URL の作り方と解放のしかたを確かめました。

選んだ画像をブラウザの中で縮小し、送る前にプレビューする方法を React と TypeScript で確かめました。アップロード前の画像の圧縮に使えます。canvas で JPEG にする関数、選び直したときの古い結果の捨て方、透明 ...

サイドバーと本文のあいだの取っ手をドラッグして、幅を変えられるようにする部品を 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 のファイルの読み方、列数が合わない行の知らせ方を、実際の出力とともに扱います。

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