getUserMedia() で得たカメラの映像を video に映し、撮影ボタンを押した瞬間の映像を canvas に描いて JPEG にする方法です。StrictMode でもカメラを止め忘れない片付けの書き方と、前面カメラの左右 ...

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

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

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

要素が画面に入ったら、透明な状態から、少し下の位置からせり上がるように表示するフックを作りました。ページを読み進めるにつれて、カードなどを1つずつフェードインさせたいときに使えます。一度表示したら消さない作り方、横に並んだ要素を順に出 ...

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

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

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

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

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