import { useEffect, useState } from 'react';
 
export function useUnsavedFormChanges() {
    const [isFormChanged, setIsFormChanged] = useState(false);
 
    const setFormChanged = (value: boolean) => {
        setIsFormChanged(value);
    };
 
    useEffect(() => {
        const handleBeforeUnload = (event: { returnValue: string }) => {
            if (isFormChanged) {
                const confirmationMessage = 'You have unsaved changes. Are you sure you want to leave?';
                event.returnValue = confirmationMessage;
                return confirmationMessage;
            }
        };
 
        window.addEventListener('beforeunload', handleBeforeUnload);
 
        return () => {
            window.removeEventListener('beforeunload', handleBeforeUnload);
        };
    }, [isFormChanged]);
 
    return { isFormChanged, setFormChanged };
}
 

 
import React from 'react';
import { useUnsavedFormChanges } from './hooks/use-unsaved-form-changes';
 
function App() {
    const { isFormChanged, setFormChanged } = useUnsavedFormChanges();
 
    const handleChange = () => {
        setFormChanged(true);
    };
 
    const handleSave = () => {
        setFormChanged(false);
    };
 
    return (
        <div>
            <h1>useUnsavedFormChanges Example</h1>
            <form>
                <input type="text" onChange={handleChange} />
                <button type="button" onClick={handleSave}>Save</button>
            </form>
            {isFormChanged && <p>You have unsaved changes!</p>}
        </div>
    );
}
 
export default App;