form-handler-hook

Form Handler Hook v2

A hook to handle forms in React. This is a complete revamp of the previous versions.

Features

• Provides validation (still in development, more will be available soon)
• Provides excellent type-intelliscence
• Returns form handler functions (like handleChange and handleSubmit), along with shorthands for input-element props (inputProps)

Usage

function MyComponent() {
  const { handleSubmit, inputProps, errors } = useForm({
    values: {
      email: "",
      password: "",
    },
    validation: {
      email: {
        isRequired: true,
      },
      password: {
        isRequired: true,
        minLength: 10,
        shouldContain: /[0-9][a-z]/g,
      },
    },
    onSubmit: (values, { addError }) => {
      // ..
    },
  });

  return (
    <form onSubmit={handleSubmit}>
      <input type="email" {...inputProps("email")} />
      <input type="password" {...inputProps("password")} />
      <button type="submit">Submit</button>
    </form>
  );
}