Morf-manager NPM

useForm Hook

The useForm hook is a custom React hook designed to simplify form management by handling form field validation, submission and minimizing unnecessary re-renders. This README provides an overview of how to use the useForm hook, its motivation, and usage examples.

Motivation

Creating and managing forms in React applications can be complex, especially when handling form field validation and submission. The useForm hook was created with the following motivation:

Form Field Validation: It simplifies the process of form field validation by allowing you to define validation rules in a schema.

Form Submission: The hook handles form submission and prevents it from occurring when there are validation errors.

Performance Optimization: The hook is designed to minimize re-renders by updating only when necessary.

Installation

You can install useForm using npm or yarn:

  npm install morf-manager

  yarn add morf-manager

Usage

import React from "react";
// Import the useForm hook
import useForm, { required, email } from "morf-manager";

// Define your form schema
const schema = {
  fields: {
    // Define your form fields here
    email: "",
  },
  validators: {
    // Define your validation rules here
    email: [required(), email("invalid email")],
  },
};

const MyForm = () => {
  // Initialize the useForm hook
  const { errors, register, onSubmit } = useForm(schema, handleSubmit);

  const handleSubmit = (formData) => {
    // Handle form submission here
    console.log("Form data submitted:", formData);
  };

  return (
    <form onSubmit={onSubmit}>
      {/* Render your form fields and use the register function */}
      <input {...register("email")} />
      {errors.email && <span>{errors.email}</span>}

      <button type="submit">Submit</button>
    </form>
  );
};

export default MyForm;

In this example, you define your form schema and validation rules, initialize the useForm hook, and use the provided functions and values to manage your form's state and behavior.