useForm Hook with Nested Objects for React and TypeScript

A custom React hook for handling form state with support for nested objects and arrays. This hook utilizes useReducer to manage form state efficiently and flexibly.

Installation

You can install this hook via npm:

npm install use-reducer-form-hook

or via yarn:

yarn add use-reducer-form-hook

Basic Usage

import React from "react";
import { useForm } from "use-reducer-form-hook";

type FormData = {
  name: string;
  age: number;
  address: {
    street: string;
    city: string;
  };
  family: { name: string; age: number }[];
};

const MyForm = () => {
  const [formState, inputHandler, setFormData] = useForm<FormData>({
    name: "",
    age: 0,
    address: {
      street: "",
      city: "",
    },
    family: [
      { name: "", age: 0 },
      { name: "", age: 0 },
    ],
  });

  const handleInputChange = (
    e: React.ChangeEvent<HTMLInputElement>,
    key: string
  ) => {
    inputHandler(key, e.target.value);
  };

  return (
    <form>
      <input
        type="text"
        name="name"
        value={formState.name}
        onChange={(e) => handleInputChange(e, "name")}
      />

      <input
        type="number"
        name="age"
        value={formState.age}
        onChange={(e) => handleInputChange(e, "age")}
      />

      <input
        type="text"
        name="street"
        value={formState.address.street}
        onChange={(e) => handleInputChange(e, "address.street")}
      />

      <input
        type="text"
        name="city"
        value={formState.address.city}
        onChange={(e) => handleInputChange(e, "address.city")}
      />

      {formState.family.map((member, index) => (
        <div key={index}>
          <input
            type="text"
            value={member.name}
            onChange={(e) => handleInputChange(e, `family.${index}.name`)}
          />
          <input
            type="number"
            value={member.age}
            onChange={(e) => handleInputChange(e, `family.${index}.age`)}
          />
        </div>
      ))}
    </form>
  );
};

export default MyForm;

API

useForm<T>(initialState: T)

A custom hook to manage form state.

Parameters

• initialState (T): The initial state of the form.

Returns

• formData (T): The current state of the form.
• handleChange: A function to handle input changes.
• resetForm: A function to reset the form to its initial state.

Examples

Login Form

interface LoginForm {
  username: string;
  password: string;
}

const LoginFormComponent = () => {
  const [formData, handleChange, resetForm  = useForm<LoginForm>({
    username: "",
    password: "",
  });

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    // Handle login logic
    console.log(formData);
  };

const resetFormData = ()=>{
  resetForm({ username: "",
    password: "",})
}
  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"

        value={formData.username}
        onChange={(e)=>handleChange('username',e.target.value)}
      />
      <input
        type="password"
        name="password"
        value={formData.password}
        onChange={(e)=>handleChange('password',e.target.value)}
      />
      <button type="submit">Login</button>
      <button type="button" onClick={resetFormData}>
        Reset
      </button>
    </form>
  );
};

License

MIT