Guide
Reference
Roadmap
Guide
Reference
Roadmap

useBeforeUnload

Tags:
Browser

A React Hook to perform actions before the page is unloaded (e.g., closing, refreshing the page) and optionally trigger a browser-native confirmation dialog. set preventDefault to true to show the confirm leave dialog.

Demo

Try to close/refresh this page with different status and see what happens!

Source
Show confirm dialog:
true

Usage

See API for more details.

Source

Click links below to view source on GitHub.

🪝 Hook🎨 Demo📄 Document

API

useBeforeUnload(callback, options)

Callback

A function that will be called right before the page is potentially unloaded.

/**
 * A callback function to run before the page is unloaded
 *
 * @param {BeforeUnloadEvent} event - `BeforeUnloadEvent`, the event object
 * @returns {void} `void`
 */
export type UseBeforeUnloadCallback = (event: BeforeUnloadEvent) => void

Options

export interface UseBeforeUnloadOptions {
  /**
   * Whether to prevent the default behavior of the event, which leads to showing a browser-native message
   *
   * @see https://developer.mozilla.org/en-US/docs/Web/API/Window/beforeunload_event
   *
   * @defaultValue false
   */
  preventDefault?: boolean
}

Returns

A clear function to remove the event listener.