31 lines
1.1 KiB
TypeScript
31 lines
1.1 KiB
TypeScript
import { useEffect } from 'react';
|
|
|
|
export default function usePreventNavigation(
|
|
enabled?: boolean,
|
|
// eslint-disable-next-line max-len
|
|
confirmation = 'Are you sure you want to leave this page? Any unsaved changes will be lost.',
|
|
includeButtons?: boolean,
|
|
) {
|
|
useEffect(() => {
|
|
const callback = (e: MouseEvent) => {
|
|
const target = e.target as HTMLElement | undefined;
|
|
const parent = target?.parentElement as HTMLElement | undefined;
|
|
const grandParent = parent?.parentElement as HTMLElement | undefined;
|
|
const targets = [target, parent, grandParent];
|
|
if (
|
|
targets.some(target => target?.tagName === 'A') && (
|
|
!includeButtons ||
|
|
targets.some(target => target?.tagName === 'BUTTON')
|
|
)
|
|
) {
|
|
if (enabled && !confirm(confirmation)) {
|
|
e.stopPropagation();
|
|
e.preventDefault();
|
|
}
|
|
}
|
|
};
|
|
document.addEventListener('click', callback, true);
|
|
return () => document.removeEventListener('click', callback, true);
|
|
}, [enabled, confirmation, includeButtons]);
|
|
}
|