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

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

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

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

React で色を選ぶ入力欄を、input type=”color” と state で作りました。値が小文字の「#rrggbb」で読み出されることや onChange が呼ばれる回数、カラーコード欄と色のボタ ...

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

価格の下限と上限を2つのつまみで選ぶスライダーを、input type=”range” を2つ重ねて React で作りました。つまみだけがクリックを受ける CSS と、重なったつまみが動かせなくなる問題の直し ...

検索結果の中で、検索した言葉だけを mark 要素で囲んで強調する部品を React で作りました。正規表現を渡した split で文字列を分ける書き方と、記号で画面が消える、結果が抜けるなどのつまずきを検証環境で確かめています。

入力した言葉を Enter や「,」でタグにして並べ、×ボタンや Backspace で消せる入力欄を React で作りました。日本語の変換を確定する Enter、フォームの送信、削除後のフォーカスの扱いも検証環境で確かめています。 ...

画面の上に残るヘッダーを CSS の position: sticky で作り、上に着いたときだけ影を付ける処理を React と IntersectionObserver で書きました。固定されないときに見直す3つの点も、検証環境で ...