Skip to content

kkatkus/use-form

Repository files navigation

useForm

simple things


React useForm custom hook | storybook


To get it started, add use-form to your project:

yarn add @kkatkus/use-form

Or if you prefer using npm:

npm install @kkatkus/use-form --save

How to use it

useForm<T>(config: UseFormConfig<T>, options?: UseFormOptions): UseForm<T>

Example:

interface ExampleForm extends Record<string, UseFormValue> {
 email: string;
 password: string;
 repeatPassword: string;
 age: number;
};
function Example(): ReactElement {
  
  const ageValidator = (val: UseFormValue): string | null => {
    if (val === "") {
      return null;
    }

    if (Number(val) < 18) {
      return " Not 18";
    }

    return null;
  };

  const form = useForm<ExampleForm>(
    {
      email: ['test@test.com', required('Email is required'), email()],
      password: [required('Password is required'), minLength(8)],
      repeatPassword: [required('Repeat password is required'), equal<ExampleForm>('password', 'Passwords must match')],
      age: [required('Age is required'), ageValidator],
    },
    {
      validateOn: 'change',
    }
  );

  const handleSubmit = async (e: FormEvent) => {
    e.preventDefault();
    const { valid, errors } = form.submit();
    if (!valid) {
      return;
    }

    // when valid do something
    // ...
  };

  return (
    <form ref={form.ref} onSubmit={handleSubmit} method="post">
      <Input type="text" placeholder="Email address" name="email" />
      <Input type="password" placeholder="Password" name="password" />
      <Input type="password" placeholder="Repeat password" name="repeatPassword" />
      <Input type="number" placeholder="Age" name="age" />
      <button type="submit">Create my account</button>
    </form>
  );

Validators


  • min(minVal: number, message: string): string | null
    Validator that requires the control's value to be greater than or equal to the provided number.

  • max(maxVal: number, message: string): string | null
    Validator that requires the control's value to be less than or equal to the provided number.

  • required(message: string): string | null
    Validator that requires the control have a non-empty value.
  • requiredTrue(message: string): string | null
    Validator that requires the control's value be true. This validator is commonly used for required checkboxes.

  • equal(withName: string, message: string): string | null
    Validator that requires the control's value to be equal with other control's value. This validator is commonly used to compare passwords.

  • email(message: string): string | null
    Validator that requires the control's value pass an email validation test.

  • minLength(minLengh: number, message: string): string | null
    Validator that requires the length of the control's value to be greater than or equal to the provided minimum length.

  • maxLength(maxLength: number, message: string): string | null
    Validator that requires the length of the control's value to be less than or equal to the provided maximum length.

  • pattern(pattern: string | RegExp, message: string): string | null
    Validator that requires the control's value to match a regex pattern.

  • numeric(message: string): string | null
    Validator that requires the control's value pass numeric validation test.

  • decimal(message: string): string | null
    Validator that requires the control's value pass decimal validation test.

About

Form validation custom react hook

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published