ブラウザのネットワークが切れたら「13:19 からオフラインです」と出し、つながったら「オンラインに戻りました」を3秒だけ出す表示を React で作りました。navigator.onLine が true でもサーバーに届かない場合 ...

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

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

記事をどこまで読んだかを画面の上のバーで示すフックを、React で作りました。割合はページ全体ではなく記事の要素から計算し、画像の読み込みで記事の高さが変わったときも ResizeObserver で計算し直します。CSS だけで作 ...

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

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

React で、いま読んでいる節の見出しを目次で強調する方法です。IntersectionObserver で、見出しが固定ヘッダーの下端を通り過ぎたときだけ位置を計算し、上へ戻ったときや途中から開いたときもずれないようにします。

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

ReactでServer-Sent Eventsの通知を受け取る方法です。名前付きイベントの受け取り方、つなぎ直しとLast-Event-IDでの取りこぼし防止、同じオリジンへの接続が6本で止まる制限を検証環境で確かめました。 ...

同じサイトを複数のタブで開いているとき、片方のタブで変えた状態を、BroadcastChannelでほかのタブにも反映する方法です。チャンネルを閉じ忘れたときの動きや、あとから開いたタブに値を渡す方法を、検証環境で確かめました。