react-before-leave
v2.1.2
Published
React component and hook which listens to `beforeunload` on the window when mounted.
Downloads
291
Maintainers
Readme
react-beforeunload
React component which listens to beforeunload
on the window when mounted but can also block react-router
.
React component and hook which listens to beforeunload
on the window when mounted.
Usage
useBeforeunload
Hook (recommended)
import { useBeforeunload } from 'react-beforeunload';
Display a dialog box:
useBeforeunload(event => event.preventDefault());
Display a dialog box with custom message:
useBeforeunload(() => "You'll lose your data!");
Some browsers display the returned string in the dialog box, others display a fixed message.
Beforeunload
Component
import { Beforeunload } from 'react-beforeunload';
And use as you would use the hook:
<Beforeunload onBeforeunload={event => event.preventDefault()} />
<Beforeunload onBeforeunload={() => "You'll lose your data!"} />
Alternatively use it as a wrapper:
<Beforeunload onBeforeunload={…}>
<MyApp />
</Beforeunload>
Requirements
Requires a minimum of React version 16.8.0. If you're on an older version of React, then checkout v1.