alertOnLeave.ts

/** If true is returned it is used to prevent a nav away */
export type Check = () => true | false | undefined;

/** Checks we need to do before leave */
let checks: Check[] = [];

/** Only alert in browsers */
if (typeof window !== 'undefined') {
  const getMessageIfAny = () => {
    let message: ReturnType<Check> = false;
    for (const check of checks) {
      message = check();
      if (message) break;
    }
    return message;
  }
  /** Browser close and reload */
  window.addEventListener('beforeunload', (e) => {
    const message = getMessageIfAny();
    if (!message) return null; // Dont alert

    /**
     * Note: Browsers no longer allow a custom message
     * But you still need to pass a string to trigger the alert
     */
    const sampleMessage = 'Changes you made may not be saved.'
    e.preventDefault(); // Without this XHRs get cancelled
    e.returnValue = sampleMessage; // Gecko, Trident, Chrome 34+
    return sampleMessage; // Gecko, WebKit, Chrome <34
  });
}

export function alertOnLeave(check: Check) {
  checks.push(check);
  return () => {
    checks = checks.filter(c => c !== check);
  }
}