react-beforeunload

Listen to the beforeunload window event in React.

Usage

useBeforeunload Hook (recommended)

useBeforeunload(handler);

Parameters

• handler optional function to be called with BeforeUnloadEvent when beforeunload event is fired. Passing a non-function value will disable the event listener.

Example

Simple

import { useBeforeunload } from "react-beforeunload";

const Example = (props) => {
  useBeforeunload((event) => event.preventDefault());
  ...
};

Conditional

import { useBeforeunload } from "react-beforeunload";

const Example = (props) => {
  const [value, setValue] = useState("");

  useBeforeunload(value !== "" ? (event) => event.preventDefault() : null);
  // or
  useBeforeunload(value !== "" && () => true);

  ...
};

Beforeunload Component

<Beforeunload onBeforeunload={handler} />

Props

• onBeforeunload function to be called with BeforeUnloadEvent when beforeunload event is fired.

Example

import { Beforeunload } from "react-beforeunload";

class Example extends React.Component {
  state = { value: "" };

  render() {
    return (
      <>
        {this.state.value !== "" && (
          <Beforeunload onBeforeunload={(event) => event.preventDefault()} />
        )}
        <input
          onChange={(event) => this.setState({ value: event.target.value })}
          value={this.state.value}
        />
      </>
    );
  }
}

:information_source: The Beforeunload component will render any children passed as-is, so it can be used as a wrapper component:

<Beforeunload onBeforeunload={…}>
  <MyApp />
</Beforeunload>

Custom message support

:warning: Some browsers used to display the returned string in the confirmation dialog, enabling the event handler to display a custom message to the user. However, this is deprecated and no longer supported in most browsers.

Source

To display a custom message in the triggered dialog box, return a string in the passed event handler function.

With useBeforeunload hook:

useBeforeunload(() => "You’ll lose your data!");

With Beforeunload component:

<Beforeunload onBeforeunload={() => "You’ll lose your data!"} />