All Forms posts

  • Display Warning for Unsaved Form Data on Page Exit

    Display Warning for Unsaved Form Data on Page Exit

    Updated on · 6 min read

    This article shows how to implement a FormPrompt component that alerts users when they attempt to leave a page with unsaved changes. It discusses handling such scenarios using pure JavaScript with the beforeunload event, as well as React-specific solutions using the Prompt component in React Router v5 and the useBeforeUnload and unstable_useBlocker hooks in React Router v6.


  • Advanced Multistep Forms with React Hook Form

    Advanced Multistep Forms with React Hook Form

    Updated on · 6 min read

    In a previous post, we built a basic multistep registration form using React and React Hook Form. In this article, we'll expand upon that foundation by implementing improvements, such as enabling data saving during step navigation and enhancing the visual representation of each step's state.


  • Build a Multistep Form With React Hook Form

    Build a Multistep Form With React Hook Form

    Updated on · 8 min read

    Multistep forms a.k.a. wizard or funnel forms have a wide range of uses. They are most common when collecting different types of information into one data structure but are also useful to break down very large forms into the less user-intimidating multistep process. In this post, we'll build a basic multistep registration form, which collects the user's info and then presents it in a confirmation view, which can be reviewed and edited before the submission.


  • TypeScript: Typing Form Events In React

    TypeScript: Typing Form Events In React

    Updated on · 9 min read

    Handling events in React is very close to how the events on DOM elements are handled. The biggest difference is, however, that React wraps the native DOM events into SyntheticEvent, making them behave slightly differently than the native events. Consequently, typing form events in React is not the same as native events. In this post, we'll see how to type form events in React on the example of a simple component as well as discuss the most common pitfalls.


Back to all posts