Auto save runs every time a user clicks something (e.g. button, option, select) or leaves an input field.
If a user navigates away (React Router) or hides the component (conditional rendering), the form is auto saved if all required fields are filled.
If a required field isn't filled (here "First Name"), there will be an intercepting dialog which asks you to discard the changes ("Discard" button) or to continue with the form ("Cancel" button).
Caveat: The intercepting Dialog is triggered whenever a user clicks outside of the form and not all required fields are filled to be saved. An alternative implementation would be to call this dialog only if a user navigates away (e.g. click "Home" link) or removes the component (e.g. click "User ID: 2" option). The former could be easily integrated once in React Router. However, the latter would need to be implemented for every user interaction (e.g. "User ID: 2"), which removes the form, on this page.
git clone [email protected]:the-road-to-learn-react/react-autosave-example.git- cd react-autosave-example
- npm install
- npm start
- visit
http://localhost:3000