@mshafiqyajid/react-form

npm install @mshafiqyajid/react-form

import { Form } from "@mshafiqyajid/react-form/styled";
import "@mshafiqyajid/react-form/styles.css";

<Form
  defaultValues={{ email: "", password: "" }}
  validate={(values) => {
    const errors: Record<string, string> = {};
    if (!values.email) errors.email = "Email is required";
    if (String(values.password).length < 8)
      errors.password = "At least 8 characters";
    return errors;
  }}
  onSubmit={async (values) => {
    await login(values.email as string, values.password as string);
  }}
>
  {(form) => (
    <>
      <Form.Field name="email" label="Email" hint="Work email preferred" required>
        <input type="email" {...form.register("email", { required: true })} />
      </Form.Field>

      <Form.Field name="password" label="Password" required>
        <input type="password" {...form.register("password", { required: true })} />
      </Form.Field>

      <Form.Submit>Sign in</Form.Submit>
    </>
  )}
</Form>

import { useForm } from "@mshafiqyajid/react-form";

const { register, handleSubmit, formState } = useForm({
  defaultValues: { email: "", password: "" },
  validate: (values) => {
    const errors: Record<string, string> = {};
    if (!values.email) errors.email = "Email is required";
    if (!values.password) errors.password = "Password is required";
    return errors;
  },
  onSubmit: async (values, helpers) => {
    await login(values.email as string, values.password as string);
    helpers.reset();
  },
});

return (
  <form onSubmit={handleSubmit} noValidate aria-busy={formState.isSubmitting}>
    <div>
      <label htmlFor="rfrm-field-email">Email</label>
      <input type="email" {...register("email")} />
      {formState.errors.email && (
        <span role="alert">{formState.errors.email}</span>
      )}
    </div>
    <div>
      <label htmlFor="rfrm-field-password">Password</label>
      <input type="password" {...register("password")} />
      {formState.errors.password && (
        <span role="alert">{formState.errors.password}</span>
      )}
    </div>
    <button type="submit" disabled={formState.isSubmitting}>
      {formState.isSubmitting ? "Signing in…" : "Sign in"}
    </button>
  </form>
);

<Form
  defaultValues={{ username: "" }}
  validate={async (values) => {
    const taken = await checkUsernameTaken(values.username as string);
    return taken ? { username: "Username is already taken" } : {};
  }}
  validateOn="blur"
  revalidateOn="change"
  onSubmit={handleSubmit}
>
  {(form) => (
    <>
      <Form.Field name="username" label="Username" required>
        <input {...form.register("username", { required: true })} />
      </Form.Field>
      <Form.Submit>Create account</Form.Submit>
    </>
  )}
</Form>

const [formValues, setFormValues] = useState({ search: "" });

<Form
  values={formValues}
  onSubmit={(values) => console.log(values)}
>
  {(form) => (
    <>
      <Form.Field name="search" label="Search">
        <input
          {...form.register("search")}
          onChange={(e) => setFormValues({ search: e.target.value })}
        />
      </Form.Field>
      <Form.Submit>Search</Form.Submit>
    </>
  )}
</Form>

const { setValue, setError, clearErrors, reset, watch, formState } = useForm({
  defaultValues: { role: "viewer" },
});

// Read current value
const role = watch("role");

// Set a value programmatically
setValue("role", "admin");

// Set a server-side error
setError("email", "This email is already in use");

// Clear a specific error
clearErrors("email");

// Clear all errors
clearErrors();

// Reset to defaults
reset();

// Reset to different values
reset({ role: "editor" });