行数に合わせて高さが伸び、上限を超えたら中でスクロールするテキストエリアを React で作りました。CSS の field-sizing: content に高さを任せ、使えないブラウザでは scrollHeight を測ります。

ユーザーが選んだ動画ファイルから、ブラウザの中でサムネイル用の JPEG を作る方法です。画面に出さない video 要素で場面へ移動し、canvas に描いて toBlob で画像にします。seeked を待たずに描くと前の場面が写 ...

付せんをつまみのドラッグで好きな位置へ動かす仕組みを、ライブラリを使わずに React で作りました。位置と重なり順は state で持ちます。重なり順を配列の並べ替えで変えると、ドラッグが途中で止まることも確かめました。

要素が画面に入ったら、透明な状態から、少し下の位置からせり上がるように表示するフックを作りました。一度表示したら消さない作り方、横に並んだ要素を順に出す方法、動きを減らす設定への対応、ページの最後の要素が表示されない落とし穴を確かめて ...

入力したパスワードの強さを、React で5本のバーと「弱い」「強い」などの言葉で表示します。判定は zxcvbn-ts に任せ、重い計算は Web Worker に移し、メールアドレスの一部を使ったパスワードも弱いと出るようにしまし ...

入力した文字から QR コードを作り、画面に表示して PNG で保存できる React のコンポーネントを、qrcode.react で作ります。読み取れなくなる原因になりやすい余白の不足、入る文字数の上限、ロゴを重ねるときの誤り訂正 ...

お知らせの文字を右から左へ流し続ける React のコンポーネントです。同じリストを2つ並べて CSS アニメーションで半分だけ動かし、つなぎ目をなくします。一時停止ボタン、キーボード操作、動きを減らす設定への対応も入れています。

サイトのメインの色を、利用者がラジオボタンで選べるようにする React のコードです。色は CSS 変数1つにまとめて localStorage に保存し、再読み込みのときに前の色が一瞬出ないよう、head の小さなスクリプトで戻し ...

ブラウザの Notifications API で、パソコンの画面の端に通知を出す React のコードです。許可の求め方と状態の持ち方、通知をクリックしたときにタブへ戻す方法、タブを見ていないときだけ出す方法を、Chromium の ...

打った数字に合わせて「090-1234-5678」のようにハイフンを入れる、React の電話番号の入力欄です。途中を書き直すとカーソルが末尾へ飛ぶ問題と、ハイフンを Backspace で消せない問題の直し方を確かめました。 ...