指でめくると1枚ずつ止まる画像のカルーセルを、React と CSS Scroll Snap で作りました。前へ・次へのボタン、何枚目かの表示、ページが縦に動かないめくり方、画面の幅が変わったときの動きを、検証環境で確かめています。

details と summary でアコーディオンを作ると、開閉とキーボード操作はブラウザに任せられます。React の state で開閉を持つときに onToggle が要る理由、name 属性で1つだけ開く作り、三角の消し方と ...

タブを ←→・Home・End で切り替えられるように、React と TypeScript で作りました。Tab キーで止まるタブを1つにする tabindex の付け方、ref の配列でフォーカスを動かす書き方、Enter で切り ...

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