reloadOnResize

リサイズを監視し、既定では「幅が変化した」かつ「指定ブレークポイントを跨いだ」ときだけページをリロードする（スマホのアドレスバー開閉などで起きる高さのみの変化では発火しない）。SP と PC でレイアウト構造が大きく異なり、JS 側の再初期化が必要なケースなどに使う、依存ゼロの素のJS。戻り値の関数を呼ぶと監視を解除できる。

Init Options

Option	Type	Default	Description
`delay`	`number`	`200`	デバウンス時間（ms）。最後のリサイズからこの時間後に判定する
`breakpoints`	`number[]`	`未指定`	跨いだらリロードするブレークポイント(px)の配列。未指定なら「幅が変化したら毎回」リロードする
`widthOnly`	`boolean`	`true`	高さのみの変化を無視する（スマホのアドレスバー開閉などモバイル対策）
`target`	`Window`	`window`	監視対象。テスト用に window 以外を差し替え可能

Demos

本来はページ読み込み時に呼び出して常時監視させるものだが、このデモでは挙動を確認しやすくするためボタンを押した時点で監視を開始する形にしている。ボタンを押した状態でウィンドウをリサイズすると、各設定でリロードが発火するタイミングの違いを確認できる。

1. 幅が変化するたびにリロード

最もシンプルな使い方。breakpoints を指定しない場合、幅が変化するたびにリロードする。

コードを見る

import { reloadOnResize } from 'form-snippets';

reloadOnResize();

2. ブレークポイントを跨いだときだけリロード

768px を境に、その境界を跨いだときだけリロードする。境界内でのリサイズでは発火しない。

コードを見る

import { reloadOnResize } from 'form-snippets';

reloadOnResize({ breakpoints: [768] });

3. 複数ブレークポイント＋デバウンス調整

576 / 768 / 992px の3つの境界を監視しつつ、デバウンス時間を 300ms に伸ばす例。

コードを見る

import { reloadOnResize } from 'form-snippets';

reloadOnResize({ breakpoints: [576, 768, 992], delay: 300 });

4. 高さの変化でもリロードしたい場合

widthOnly: false にすると、高さのみの変化（モバイルのアドレスバー開閉など）でもリロード対象になる。

コードを見る

import { reloadOnResize } from 'form-snippets';

reloadOnResize({ widthOnly: false });

5. 監視を解除する

戻り値の関数（stop）を呼ぶと監視を解除できる。このボタンは常に「監視を停止」の状態で、1〜4のいずれかで開始している監視を停止する役割を持つ。

コードを見る

import { reloadOnResize } from 'form-snippets';

const stop = reloadOnResize({ breakpoints: [768] });
// ...後で
stop();