HouseForm - Simplify Form Creation in React

import Newsletter from "@components/Newsletter"; import { YouTube } from "astro-embed";

Do you find form creation a hassle? You’re not alone. Many React developers find dealing with forms tedious and frustrating. That's where HouseForm comes in. HouseForm is a React library that simplifies form creation with its headless and agnostic approach.

In this guide, we will discuss HouseForm it's features and how to use it to create simple and complex forms.

<YouTube id="https://youtu.be/bQVUGx8rSuQ" />

Introduction to HouseForm

As mentioned earlier, HouseForm is a React library that allows you to create forms with ease. Its headless and agnostic approach means it can be used with any UI or CSS library.

How HouseForm Works

Before beginning, you need to grab the Form and Field components from HouseForm. The Form component wraps around your existing form, while the Field component contains everything you require in your application, like username, password, email, and more.

For instance,

import { Form, Field } from "house-form";

<Form onSubmit={handleSubmit}>
  <Field name="username" initialValue="">
    {({ value, setValue, onBlur }) => (
      <input
        type="text"
        onChange={event => setValue(event.target.value)}
        onBlur={onBlur}
        value={value}
      />
    )}
  </Field>
  // ...
</Form>;

You can pass onSubmit to the Form. The Field uses render props and the name prop to pass data between your app and the library.

The initialValue is an empty string. The value prop is set to the value state in the onChange handler, which is updated every time a user types.

Validating Forms using HouseForm

In addition to creating simple forms, HouseForm makes validating forms easier. You can add validation checks using Zod, a popular JavaScript module for schema validation.

For instance,

<input
  type="email"
  value={emailValue}
  onBlur={handleBlur}
  onChange={handleChange}
/>

The Field component is used here to validate email addresses via the Zod validation schema. When a user types an invalid email address, the input will reflect instructions to tell them to fix their input.

<Field name="email" validationSchema={z.email()}>
  {({ value, setValue, onBlur, error, isError }) => (
    <div>
      <input
        type="email"
        value={value}
        onChange={e => setValue(e.target.value)}
        onBlur={onBlur}
      />
      {isError && <p>{error}</p>}
    </div>
  )}
</Field>

Creating a Form with Network requests

If your form uses the action property to submit the form to a remote server, you can use a custom onSubmit function, a useRef, and a <form> ref's submit() function to check validation and run a form's action logic conditionally which makes it easy to create a form with network requests.

import { Form, Field } from "houseform";
import { z } from "zod";
import { useRef } from "react";

export default function App() {
  const formRef = useRef();

  return (
    <Form>
      {({ isValid, submit }) => (
        <form
          action="https://example.com/url"
          method="post"
          ref={formRef}
          onSubmit={e => {
            e.preventDefault();
            submit().then(isValid => {
              // Is `true` if valid, `false` if not.
              if (!isValid) return;
              formRef.current.submit();
            });
          }}
        >
          <Field
            name="email"
            onBlurValidate={z.string().email("This must be an email")}
          >
            {({ value, setValue, onBlur, errors }) => {
              return (
                <div>
                  <input
                    name="email"
                    value={value}
                    onBlur={onBlur}
                    onChange={e => setValue(e.target.value)}
                    placeholder={"Email"}
                  />
                  {errors.map(error => (
                    <p key={error}>{error}</p>
                  ))}
                </div>
              );
            }}
          </Field>
          <button disabled={!isValid} type="submit">
            Submit
          </button>
        </form>
      )}
    </Form>
  );
}

Conclusion

HouseForm is a great React library that simplifies the form creation process. Its validation using Zod is a great touch, making form creation error-free.

You can find the HouseForm library here. Give it a try and make your form creation easier!