unstable_usePrompt

この API は実験的であり、マイナー/パッチリリースで破壊的変更が加えられる可能性があります。慎重に使用し、関連する変更についてはリリースノートに非常に注意してください。

概要

リファレンスドキュメント ↗

useBlocker をラップし、useBlocker でカスタム UI を構築する代わりに、window.confirm プロンプトをユーザーに表示します。

このテクニックには多くの未完成な点があり、確認ダイアログが開いている間にユーザーが追加の「戻る」/「進む」ナビゲーションをクリックした場合、ブラウザ間で動作が大きく異なる（時には正しくない）ため、unstable_ フラグは削除されません。自己責任で使用してください。

function ImportantForm() {
  let [value, setValue] = React.useState("");
 
  // 入力にデータが入力されている場合、他の場所へのナビゲーションをブロックします
  unstable_usePrompt({
    message: "Are you sure?",
    when: ({ currentLocation, nextLocation }) =>
      value !== "" &&
      currentLocation.pathname !== nextLocation.pathname,
  });
 
  return (
    <Form method="post">
      <label>
        Enter some important data:
        <input
          name="data"
          value={value}
          onChange={(e) => setValue(e.target.value)}
        />
      </label>
      <button type="submit">Save</button>
    </Form>
  );
}

シグネチャ

function usePrompt({
  when,
  message,
}: {
  when: boolean | BlockerFunction;
  message: string;
}): void

パラメータ

options.message

確認ダイアログに表示するメッセージ。

options.when

ナビゲーションをブロックするかどうかを示す boolean または boolean を返す関数。関数が提供された場合、currentLocation と nextLocation プロパティを持つオブジェクトを受け取ります。

戻り値

戻り値はありません。

概要
シグネチャ
パラメータ
options.message
options.when
戻り値