Listen to the beforeunload window event in React.
useBeforeunload(handler);handleroptional function to be called withBeforeUnloadEventwhenbeforeunloadevent is fired. Passing a non-function value will disable the event listener.
import { useBeforeunload } from "react-beforeunload";
const Example = (props) => {
useBeforeunload((event) => event.preventDefault());
...
};import { useBeforeunload } from "react-beforeunload";
const Example = (props) => {
const [value, setValue] = useState("");
useBeforeunload(value !== "" ? (event) => event.preventDefault() : null);
// or
useBeforeunload(value !== "" && () => true);
...
};<Beforeunload onBeforeunload={handler} />onBeforeunloadfunction to be called withBeforeUnloadEventwhenbeforeunloadevent is fired.
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}
/>
</>
);
}
}ℹ️ The Beforeunload component will render any children passed as-is, so it can be used as a wrapper component:
<Beforeunload onBeforeunload={…}>
<MyApp />
</Beforeunload>
⚠️ 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.
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!"} />