Reactの画面を、ヘッダーやボタンを消した印刷用のレイアウトで印刷する方法です。@media print と @page でA4の紙に合わせます。入力欄を文字にするやり方、背景色、ページ番号、改ページの扱いも書きます。画面の一部だけ ...

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

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

画面の端にあるボタンのツールチップが切れないように、位置を計算するフックを TypeScript で作りました。上に入らなければ下に回し、左右は画面の内側にずらし、矢印はボタンを指したままにします。Floating UI と CSS ...

「保存しました」のようなトースト通知を、ライブラリを使わずにReactで作る方法です。どこからでも呼べるtoast()、一定時間で消すタイマー、マウスやフォーカスで止める処理、読み上げ用の領域、モーダルのdialogとの関係を確かめま ...

メニューやドロップダウンを、外側をクリックしたら閉じるカスタムフックを TypeScript で作りました。開くボタンを内側に入れる理由、click ではなく pointerdown を待つ理由、ポータルの中の扱い、タッチ操作での動き ...

自作のモーダルを開いている間、後ろの画面を包む要素に inert を付けると、Tab キーのフォーカスもクリックも届かなくなり、アクセシビリティツリーからも外れます。フォーカストラップを作るときは、後ろの画面へフォーカスが移らないよう ...

createPortalを使うと、コンポーネントの中で開いたモーダルを、DOMの上ではdocument.bodyの直下に描画できます。親のCSSでダイアログが切れる例と、ポータルの中のクリックが親に届き、親のコンテキストがポータルの中 ...