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

入力したパスワードの強さを、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 で消せない問題の直し方を確かめました。 ...

Reactで表のセルをクリックすると入力欄に変わり、Enter で保存、Escape で取り消せるようにしました。変換を確定する Enter で保存しない書き方、編集後にフォーカスをセルへ戻す方法、間違った値のときに編集を続けさせる方 ...

高さの違うカードを、列の中ですき間なく並べる表示を、ライブラリを使わずに React で作りました。画像入りのカードの一覧を、メイソンリーと呼ばれる並べ方で見せたいときに使えます。カードをいちばん短い列の下へ置いていく計算と、Resi ...

一時停止と再開ができるカウントダウンタイマーを、React と TypeScript で作りました。残り時間は終わる時刻との差から出すので、タイマーの呼び出しが遅れても表示がずれたままになりません。秒の切り上げ方なども Chromiu ...