npm promulgates marsupials

    react-beforeunload
    DefinitelyTyped icon, indicating that this package has TypeScript declarations provided by the separate @types/react-beforeunload package

    2.5.3 • Public • Published

    react-beforeunload

    React component and hook which listens to the beforeunload window event.

    Usage

    useBeforeunload Hook (recommended)

    useBeforeunload(handler);

    Parameters

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

    Example

    import { useBeforeunload } from 'react-beforeunload';
    
    const Example = (props) => {
      const [value, setValue] = useState('');
    
      useBeforeunload((event) => {
        if (value !== '') {
          event.preventDefault();
        }
      });
    
      return (
        <input onChange={(event) => setValue(event.target.value)} value={value} />
      );
    };

    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}
            />
          </>
        );
      }
    }

    ℹ️ 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

    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!'} />

    ⚠️ 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

    Requirements

    Requires a minimum of React version 16.8.0. If you're on an older version of React, then checkout v1.

    Install

    npm i react-beforeunload

    DownloadsWeekly Downloads

    164,140

    Version

    2.5.3

    License

    MIT

    Unpacked Size

    17.2 kB

    Total Files

    7

    Last publish

    Collaborators

    • jacobbuck