Show warning message when a user attempts to leave the tab (the webpage)

WarningLeaveTab.tsx

import { useEffect, useCallback } from 'react';

interface LeaveBrowserWarningProps {
  shouldWarn: boolean;
}

/**
 * Component that displays a warning message when the user attempts to leave the page.
 * @param {LeaveBrowserWarningProps} props - The component props
 * @returns {null}
 */
export const LeaveBrowserWarning: React.FC<LeaveBrowserWarningProps> = ({ shouldWarn }) => {
  const handleBeforeUnload = useCallback((event: BeforeUnloadEvent) => {
    if (shouldWarn) {
      const message = 'You have unsaved changes. Are you sure you want to leave?';
      event.preventDefault();
      // Needed for legacy support, e.g., Chrome/Edge < 119
      event.returnValue = true;
      // For modern browsers
      return message;
    }
  }, [shouldWarn]);

  useEffect(() => {
    window.addEventListener('beforeunload', handleBeforeUnload);
    return () => {
      window.removeEventListener('beforeunload', handleBeforeUnload);
    };
  }, [handleBeforeUnload]);

  return null;
};

Usage:

<LeaveBrowserWarning shouldWarn={hasUnsavedChanges} />