jacobbuck
react-beforeunload
Listen to the beforeunload window event in React.
Usage
useBeforeunload Hook (recommended)
useBeforeunload(handler);Parameters
handleroptional function to be called withBeforeUnloadEventwhenbeforeunloadevent is fired.
Example
import { useBeforeunload } from 'react-beforeunload';
const Example = (props) => {
const [value, setValue] = useState('');
useBeforeunload(value !== '' ? (event) => event.preventDefault() : null);
return (
<input onChange={(event) => setValue(event.target.value)} value={value} />
);
};Beforeunload Component
<Beforeunload onBeforeunload={handler} />Props
onBeforeunloadfunction to be called withBeforeUnloadEventwhenbeforeunloadevent 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.
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!'} />Requirements
Requires a minimum of React version 16.8.0. If you're on an older version of React, then checkout v1.