formfusion NPM Version
LearnBlogPlayground

Exploring React’s Latest Extensions to Forms

[object Object]
Sara MitevskaMay 9th, 2024
•May 9th, 2024• 5 minutes read
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi79frzukYZjl6bQqF0uAKzZJngb7gkq4zzB7lThEx6MU3JaQiICJ0IqNrJnxjMnt8zvhXsR3lEdq4Iyh-S8DUmrMawprB2v4XCQrZqAJTXW3ySYTZ9DknjvqnXo1xFkfEV4-E_ITNEzZGTWvG4lQ7YH3QDa8XeSWE3_5Uy89sSkwleiaAVIj0QL9Op_tyZ/w640-h366/1199_react_native_app.webp
react forms

React 19 brings exciting enhancements to form handling. It allows developers greater control over user interactions and smoother form management.

Let’s outline the three key features:

form now accepts a function passed as action prop. If a URL is passed, the form still behaves like the HTML form component but when a function is passed, it will handle the form submission. The function can be async and it’s called with a single argument containing the form data of the submitted form.

useFormStatus hook: Provides status information of the last form submission. Developers can leverage this hook to dynamically respond to user input and provide real-time feedback.

useFormState hook: Allows updating component state based on the result of a form action. Developers can use it to pass an existing form action function as well as an initial state and it returns new action along with the latest form state to be used.

Integrating FormFusion with React’s Latest Updates:

FormFusion (form management library) integrates with all of the React’s latest form features. React’s approach to handling a function as an action prop is the default method used in the FormFusion library via the onSubmit prop, however it also supports React’s approach out-of-the-box. Developers can use either and still get the same benefits.

Let's set up a simple project to demonstrate how FormFusion integrates with React's form features. Begin by creating a new project. If you prefer to use an existing one, feel free to skip this step and proceed directly to step 2. For our example, we'll use Vite to quickly setup a new project. However, you can use any tool of your choice and follow steps 2 through 13 accordingly.

1. Create a New Project with Vite

First, make sure you have Node.js installed on your machine. Then, open your terminal and run the following commands to create a new project using Vite and the react template: 

  npm create vite@latest my-form -- --template react

2. Install Dependencies

Install the FormFusion library used in the form component: 

  npm install formfusion

3. Create the Form Component

In the project directory, create a new file named MyForm.jsx

4. Import Required Components

Begin by importing the necessary components from the FormFusion library and any additional stylesheets. 

  import { Form, Input } from 'formfusion';
  import './App.css';

5. Create a Functional Component

Define a functional component named MyForm to encapsulate the form logic and UI. 

  const MyForm = () => {
    // Form logic and UI will be implemented here
  };

6. Define Form Submission Function

Inside the MyForm component, define a function that will be called when the form is submitted. In this example, the search function extracts the search query from the form data and displays it in an alert. 

  function search(formData) {
    const query = formData.get('query');
    alert(`You searched for '${query}'`);
  }

7. Build the form UI

Within the MyForm component, add the following code: 

  return (
    <Form action={search} validateOnChange className="form">
      {/* Form content goes here */}
    </Form>
  );

8. Define Input Field

Use the FormFusion’s <Input> component inside the <Form> component to create a search input field. Customize the input field properties as needed, such as id, name, type, and placeholder. Additionally, you can specify CSS classes for styling purposes using the classes prop. 

  <Input
    id="query"
    name="query"
    type="search"
    placeholder="Search for..."
    classes={{
      field: 'form__input-field',
      error: 'form__input-field__error',
      label: 'form__input-field__label',
    }}
  />

9. Add Submit Button

Include a submit button within the form to trigger the form submission. 

  <button type="submit">Submit</button>

10. Export Component

Export the MyForm component as the default export to make it available for use in other parts of the application. 

  export default MyForm;

11. Import the Form Component

In the App.jsx file generated by Vite, import and use the MyForm component: 

  import MyForm from './MyForm.jsx';

  function App() {
    return (
      <div>
        <MyForm />
      </div>
    );
  }

  export default App;

Once you've implemented these steps, you'll have a functional form component (MyForm) that includes a search input field and a submit button. When the form is submitted, the search function will be called, extracting the search query from the form data and displaying it in an alert.

12. Run the Project

Start the development server to see the form in action. Run the following command in your terminal: 

  npm run dev

This command will start the Vite development server, and you should be able to access your project in the browser at the specified URL (usually http://localhost:3000 or http://localhost:5173).

13. Test the Form

Open your browser and navigate to the URL where your development server is running. You should see the form rendered on the page. Try entering some text into the search input field and submitting the form to see the alert message displaying the search query.

You can find the full code on Github.

While React’s form extension allows for client-side submissions, validation remains vital. FormFusion extends the form’s built-in validation by providing validation rules and intuitive error handling mechanisms. Developers can easily apply one of the 500+ validation rules FormFusion offers and bind them to form elements, ensuring data integrity and delivering user-friendly error messages.

React 19’s form enhancements, combined with FormFusion’s advanced form management capabilities, open up new opportunities for developers. By leveraging FormFusion’s validation, submission on the client-side, and useFormStatus for real-time feedback, developers can build highly performant and user-friendly forms with ease.