グラフのライブラリを入れずに、React と SVG だけで棒グラフを描きました。値を座標に変える計算、きりのよい目盛り、画面の幅に合わせる方法、データを切り替えたときに棒を伸び縮みさせる方法を、Chromium で測った値とともに紹 ...

Geolocation API の getCurrentPosition() で緯度・経度を取得し、React の state に入れて表示する方法です。timeout と maximumAge の効き方、許可されないときの表示、wa ...

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 に移し、メールアドレスの一部を使ったパスワードも弱いと出るようにしまし ...

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

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