@isamilsalmi/useform v1.1.6

React hook form for configuer and validation

Import and use hook

import { useRef } from "react";
import useForm from "@isamilsalmi/useform";
export default function Form() {
  const formRef = useRef<any>();
  const { setFormEvent } = useForm();
  ...
  ..
  ....
}

Register and configuer input

import { useRef } from "react";
import useForm from "@isamilsalmi/useform";
export default function Form() {
  const formRef = useRef<any>();
  const { setFormEvent, register } = useForm();
  function handleSubmit(e: any) {
    setFormEvent(
      e,
      [
        {
          name: "name",
          maxLength: 10,
          minLength: 5
        }
      ],
      (values: any) => {
        console.log(values);
      }
    );
    return (
        <form ref={formRef} onSubmit={handleSubmit}>
            <div>
                <input
                    {...register({
                      name: "name",
                      type: "text",
                      placeholder: "Enter your name",
                    })}
                />
            </div>
                .......
        </form>
    )
}

Show error

import { useRef } from "react";
import useForm from "@isamilsalmi/useform";
export default function Form() {
  const formRef = useRef<any>();
  const { setFormEvent, register, errors } = useForm();
  function handleSubmit(e: any) {
    setFormEvent(
      e,
      [
        {
          name: "name",
          maxLength: 10,
          minLength: 5
        }
      ],
      (values: any) => {
        console.log(values);
      }
    );
    return (
        <form ref={formRef} onSubmit={handleSubmit}>
            <div>
                <input
                    {...register({
                      name: "name",
                      type: "text",
                      placeholder: "Enter your name",
                    })}
                />
                {errors!.name}
            </div>
                .......
        </form>
    )
}

Watch input value

import { useRef } from "react";
import useForm from "@isamilsalmi/useform";
export default function Form() {
  const formRef = useRef<any>();
  const { setFormEvent, register, errors, watch } = useForm();
  const watchValue = watch("name");
  console.log(watchValue);
  function handleSubmit(e: any) {
    setFormEvent(
      e,
      [
        {
          name: "name",
          maxLength: 10,
          minLength: 5
        }
      ],
      (values: any) => {
        console.log(values);
      }
    );
    return (
        <form ref={formRef} onSubmit={handleSubmit}>
            <div>
                <input
                    {...register({
                      name: "name",
                      type: "text",
                      placeholder: "Enter your name",
                    })}
                />
                {errors!.name}
            </div>
                .......
        </form>
    )
}