Get Started with React Form Kit

Simple, reusable form utilities for building type-safe, maintainable React forms.

@dev-waren/react-form-kitView on npm

Built around

React Hook Form

Zod

TypeScript

Integration

Choose your form library

01
Installation
Install React Form Kit using your preferred package manager.
terminal
```
npm install @dev-waren/react-form-kit
```

Define Your Schema

Create a type-safe validation schema for your form fields.

validation/login-schema.ts

import { z, sanitize } from "@dev-waren/react-form-kit";

export const schema = {
  login: z.object({
    email: z.string()
            .email({ message: "email is required" })
            .transform(sanitize),
    password: z.string()
            .min(8,{ message: "password must be atleast 8 characters long." })
            .transform(sanitize),
  }),
};

Configure the Form

Initialize the form with validation, default values, and submission behavior.

hooks/useLoginForm.ts

import { useFormSettings } from "@dev-waren/react-form-kit/hook-form";
import { schema } from "../validation/login-schema";

export const useLoginForm = () => {
  const form = useFormSettings({
    schema: schema.login,
    defaultValues: {
      email: "",
      password: "",
    },
    clearFields: ["email", "password"],
    onSubmit: (data) => {
      console.log("Submitted data:", data);
    },
  });

  return { form };
};

Define Form Fields

Describe your fields in a reusable configuration list.

fields.ts

export const fields = [
  {
    name: "email",
    placeholder: "Enter your email",
    type: "email",
  },
  {
    name: "password",
    placeholder: "Enter password",
    type: "password",
  },
];

Create a Reusable Input

Connect each input to the form state and display validation errors.

components/Input.tsx

import type { ComponentProps } from "react";
import { useInput } from "@dev-waren/react-form-kit/hook-form";
import type { Path } from "@dev-waren/react-form-kit";

type InputProps<T extends object> = ComponentProps<"input"> & {
  name: Path<T>;
};

export default function Input<T extends object>({
  name,
  ...props
}: InputProps<T>) {
  const { register, isError, error } = useInput(name);

  return (
    <div className="space-y-2">
      <input {...register} {...props} />

      {isError && (
        <p className="text-red-600">{error}</p>
      )}
    </div>
  );
}

Build the Form

Combine the form provider, field mapper, and reusable input component.

import { Mapper } from "@dev-waren/react-form-kit";
import { Form } from "@dev-waren/react-form-kit/hook-form";

import Input from "./components/Input";
import { fields } from "./fields";
import { useLoginForm } from "./hooks/useLoginForm";

export default function LoginForm() {
  const { form } = useLoginForm();

  return (
    <Form {...form}>
      <Mapper
        listFor="login form"
        items={fields}
        className="space-y-2"
        as="div"
      >
        {(field) => <Input {...field} />}
      </Mapper>

      <button type="submit">
        Login
      </button>
    </Form>
  );
}

Finished React Hook Form

Congratulations! You've just created a login form.

terminaloutput

$ Waiting for form submission...

Support the project

Enjoying React Form Kit?

A GitHub star helps the project gain visibility and reach more developers.

Star on GitHub

Installation