加工前と加工後のような2枚の画像を重ね、つまみを左右に動かして見比べる表示を、ライブラリを使わずに React で作りました。ビフォーアフターを1つの枠で見せたいときに使えます。clip-path で隠す理由、キーボードでの操作、po ...

スクロールで動画が画面から外れたら一時停止し、戻ってきたら続きを再生するフックを作りました。ユーザーが自分で止めた動画は勝手に再生しないこと、play() が中断されたときのエラーの受け方も確かめています。

長い文章を3行で切って「続きを読む」ボタンで広げるコンポーネントを TypeScript で作りました。行数で切る CSS、はみ出したときだけボタンを出す測り方、隠れた部分のリンクに Tab で入ったときの対策を Chromium で ...

canvas と Pointer Events で、マウスでも指でも書ける署名欄を React で作りました。線を点の配列で持って描き直す作りにし、画面の倍率、幅の変化、枠の外へのはみ出し、スクロールとの取り合い、画像への書き出しを確 ...

右クリックした位置に独自のメニューを出すコンポーネントを TypeScript で作りました。ブラウザのメニューの止め方、画面の端で反対側に開く計算、閉じる処理、Shift+F10 と矢印キーでの操作を Chromium で確かめてい ...

過去・現在・未来の3つに分けて状態を持つ、useReducer を使ったフックで、元に戻す・やり直すを作りました。Ctrl+Z などのショートカット、入力欄でのブラウザの「元に戻す」との分け方、更新の書き方で履歴が壊れる例も確かめてい ...

ボタンを押すと、グラフなどの要素を全画面で表示し、もう一度押すと元に戻すフックを作りました。Esc キーで抜けたときに表示がずれない状態の持ち方、クリックから時間がたつと拒否される条件、全画面の中でポータルが見えなくなる点も確かめてい ...

画像の上で範囲をドラッグして選び、その部分を PNG に切り抜く仕組みを、ライブラリを使わずに React で作りました。手元の画像をブラウザの中でトリミングする画面に使えます。setPointerCapture と draggabl ...

画面に出している表のデータを、ボタン1つで CSV ファイルとして保存させる方法です。値の囲み方、Blob と a 要素の download 属性での保存、BOM、数式として読まれる値への備えを、保存されたファイルの中身で確かめました ...

＋と−のボタンで数量を1ずつ変え、入力欄に直接打つこともできるコンポーネントを React で作りました。上限・下限でのボタンの止め方、打っている途中の文字列の扱い、キーボードでの操作と読み上げ用の output の中身を、検証環境で ...